这篇文章主要介绍了CSS3实现的水平标题菜单的示例代码，帮助大家更好的理解和学习使用CSS3制作网页特效，感兴趣的朋友可以了解下
实现效果：
实现代码
html
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实现的水平标题菜单的详细内容，更多请关注易知道|edz.cc其它相关文章！
