下拉菜单

<style>
/*
General cleanup
*/

*,
*:before,
*:after {
box-sizing: border-box;
}

html,
body {
font-family: helvetica, arial, sans-serif;
font-size: 18px;
margin: 0;
padding: 0;
}

nav ul,
nav ol {
list-style: none;
padding: 0;
margin: 0;
}

 

/*
Demo
*/
.show-nav {
position: fixed;
top: 0;
right: 0;
}

.nav__list {
background: #fff;
border-bottom: 1px solid #efefef;
text-align: center;
z-index: 2;
}

.nav__list > li {
display: inline-block;
}

.nav__list a {
display: block;
padding: 20px;
position: relative;
z-index: 2;
}

.nav__list a:hover,
.nav__list a:focus {
background: #222;
color: #fff;
}

.has-drop {
position: relative;
}

.nav__list__drop {
left: 0;
margin: 0;
position: absolute;
text-align: left;
top: 100%;
opacity: 0;
transform: translateY(-20px);
height: 1px;
transition: transform .2s ease-in-out,
opacity .1s ease-out;
overflow: hidden;
z-index: 1;
}

.nav__list__drop {
background: #fff;
min-width: 100%;
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0099FF;
border-right-color: #0099FF;
border-bottom-color: #0099FF;
border-left-color: #0099FF;
}

.nav__list__drop a {
padding: 12px 20px;
white-space: nowrap;
}

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop.has-focus {
opacity: 1;
transform: translateY(0px);
height: auto;
z-index: 1;
}

.no-js .nav__list__drop {
display: none;
}

.no-js .has-drop:hover .nav__list__drop {
display: block;
}
</style>

 

<div class="page">

<header role="banner" aria-label="Primary">

<nav role="navigation" aria-label="Primary" id="nav" class="nav">

<ul id="nav_inner" class="nav__list">
<li class="has-drop">
<a href="#!">
Drop Down
</a>

<ul class="nav__list__drop">
<li>
<a href="#!">
Item 1
</a>
</li>
<li>
<a href="#!">
Item 2
</a>
</li>
</ul>
</li>

<li>
<a href="#!">
Normal
</a>
</li>

<li class="has-drop">
<a href="#!">
Drop Down 2
</a>

<ul class="nav__list__drop">
<li>
<a href="#!">
Item 1 has a long name
</a>
</li>
<li>
<a href="#!">
Item 2
</a>
</li>
</ul>
</li>
</ul>

</nav>
</header>

</div>