我要投稿

CSS3实现的水平标题菜单

admin CSS

2023-12-02 0 663

实现效果：

实现代码

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;
}