css下拉菜单
代码
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
article {
width: 600px;
margin: 0 auto;
background: #000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
section {
clear: left;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
</style>
<article>
<h1>00000</h1>
<nav id="main_nav">
<ul>
<li>
<a href="">111</a>
<ul>
<li><a href="">2222</a></li>
<li><a href="">3333</a></li>
<li><a href="">444</a></li>
</ul>
</li>
<li>
<a href="">111</a>
<ul>
<li>
<a href="">2222</a>
<ul>
<li><a href="">3333</a></li>
<li><a href="">4444</a></li>
</ul>
</li>
<li>
<a href="">1111</a>
<ul>
<li><a href="">22222</a></li>
<li><a href="">3333</a></li>
<li><a href="">44444</a></li>
<li><a href="">55555</a></li>
</ul>
</li>
<li>
<a href="">1111</a>
<ul>
<li><a href="">2222</a></li>
<li><a href="">3333</a></li>
<li><a href="">44444</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">11111</a>
<ul>
<li><a href="">2222</a></li>
<li><a href="">3333</a></li>
<li><a href="">44444</a></li>
<li><a href="">55555</a></li>
</ul>
</li>
<li>
<a href="">1111</a>
<ul>
<li><a href="">22222</a></li>
<li><a href="">3333</a></li>
<li><a href="">4444</a></li>
</ul>
</li>
</ul>
</nav>
<section id="main_content">
<p>000000000000000000000000000000000000000</p>
<p>2222222222222222222222222222222222222222</p>
</section>
<p id="dog_link"><a href="URL"><img src="logo.png" alt="HTML Dog"></a></p>
</article>
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:18.225.234.108,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/css-drop-down-menu.html
文章链接:https://www.ooize.com/css-drop-down-menu.html
订阅
登录
0 评论