我要评论实现效果：
实现代码
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 标题菜单的资料请关注代码网其它相关文章！
发表评论