css怎样实现一个水平排列的菜单效果?
发布时间：2022-02-14 13:42:36 所属栏目：语言 来源：互联网
导读：今天给大家分享的是关于css怎样实现水平排列菜单的内容，水平菜单比较常见，很多网站都会设计和使用水平菜单，下文介绍的是用CSS3写的简单的水平菜单效果，对新手学习和了解CSS3制作网页特效有一定的帮助，感兴趣的朋友接下来跟随小编一起看看吧。 实现代码
|
今天给大家分享的是关于css怎样实现水平排列菜单的内容，水平菜单比较常见，很多网站都会设计和使用水平菜单，下文介绍的是用CSS3写的简单的水平菜单效果，对新手学习和了解CSS3制作网页特效有一定的帮助，感兴趣的朋友接下来跟随小编一起看看吧。 实现代码 html <nav class="dropdownmenu"> <ul> <li><a href="http://www.jochaho.com/wordpress/">脚本之家</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li> <li><a href="#">Articles on HTML5 & CSS3</a> <ul id="submenu"> <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li> <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li> <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li> </ul> </li> <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li> </ul> </nav> CSS3 .dropdownmenu ul, .dropdownmenu li { margin: 0; padding: 0; } .dropdownmenu ul { background: gray; list-style: none; width: 100%; } .dropdownmenu li { float: left; position: relative; width:auto; } .dropdownmenu a { background: #30A6E6; color: #FFFFFF; display: block; font: bold 12px/20px sans-serif; padding: 10px 25px; text-align: center; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .dropdownmenu li:hover a { background: #000000; } #submenu { left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 1; } li:hover ul#submenu { opacity: 1; top: 40px; /* adjust this as per top nav padding top & bottom comes */ visibility: visible; } #submenu li { float: none; width: 100%; } #submenu a:hover { background: #DF4B05; } #submenu a { background-color:#000000; } （编辑：信阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
