CSS3实现的水平标题菜单 程序员文章站 2022-03-23 14:37:31 实现效果：实现代码html 实现效果： 实现代码 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; } 以上就是css3实现的水平标题菜单的详细内容，更多关于css3 标题菜单的资料请关注其它相关文章！ 相关标签： CSS3 标题 菜单 上一篇： 领先了我 下一篇： R语言处理JSON文件的方法 推荐阅读 如何用css3实现switch组件开关的方法 css3 clip实现圆环进度条的示例代码 纯css3使用vw和vh实现自适应的方法 css3实现冲击波效果的示例代码 CSS3绘制六边形的简单实现 CSS3利用text-shadow属性实现多种效果的文字样式展现方法 利用CSS3实现的文字定时向上滚动 CSS3实现可爱的小黄人动画 纯CSS3单页切换导航菜单界面设计的简单实现 Bootstrap多级菜单的实现代码