实现效果

实现代码

html

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实现下拉菜单的资料请关注脚本之家其它相关文章！