实现效果
实现代码
html
<div id="container">
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">wordpress</a>
<!-- first tier drop down -->
<ul>
<li><a href="#">themes</a></li>
<li><a href="#">plugins</a></li>
<li><a href="#">tutorials</a></li>
</ul>
</li>
<li><a href="#">web design</a>
<!-- first tier drop down -->
<ul>
<li><a href="#">resources</a></li>
<li><a href="#">links</a></li>
<li><a href="#">tutorials</a>
<!-- second tier drop down -->
<ul>
<li><a href="#">html/css</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">other</a>
<!-- third tier drop down -->
<ul>
<li><a href="#">stuff</a></li>
<li><a href="#">things</a></li>
<li><a href="#">other stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">graphic design</a></li>
<li><a href="#">inspiration</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
<h1>pure css drop down menu</h1>
<p> a simple dropdown navigation menu made with css only. dropdowns are marked with a plus sign ( + )</p>
</div>
css
/* css document */
@import url(https://fonts.googleapis.com/css?family=open+sans);
@import url(https://fonts.googleapis.com/css?family=bree+serif);
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'open sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #fff;
}
h3 {
font-size: 30px;
text-align: center;
color: #fff;
}
h3 a {
color: #fff;
}
a {
color: #fff;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'bree serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #e64a19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #e64a19;
}
nav a {
display:block;
padding:0 10px;
color:#fff;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* hide dropdowns by default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* display dropdowns on hover */
nav ul li:hover > ul {
display:inherit;
}
/* fisrt tier dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* second, third and more tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* change this in order to change the dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
以上就是纯css实现的下拉菜单的详细内容，更多关于css实现下拉菜单的资料请关注其它相关文章！