实现效果
实现代码
html
- home
- wordpress
- themes
- plugins
- tutorials
- web design
- resources
- links
- tutorials
- html/css
- jquery
- other
- stuff
- things
- other stuff
- graphic design
- inspiration
- contact
- about
pure css drop down menu
a simple dropdown navigation menu made with css only. dropdowns are marked with a plus sign ( + )
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实现下拉菜单的资料请关注萬仟网其它相关文章！
