<ul id="menu">
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
<li><a href="#">Child Menu</a></li>
</ul>
</li>
</ul>
#menu{
list-style-type: none;
width: 500px;
height: 40px;
margin: 0 auto;
padding: 0;
background: #276baa;
}
#menu li{
position: relative;
width: 25%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#menu li a{
display: block;
margin: 0;
padding: 13px 0;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;
}
#menu li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
#menu li:last-child ul{
left: -100%;
width: 100%
}
#menu li ul li{
overflow: hidden;
width: 200%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
#menu li ul li a{
padding: 13px 15px;
background: #1a5293;
text-align: left;
font-size: 12px;
font-weight: normal;
}
#menu li:hover > a{
background: #1a5293;
color: #e0dc62;
}
#menu li:hover ul li{
overflow: visible;
height: 38px;
border-bottom: 1px solid #fff;
}
#menu li:hover ul li:first-child{
border-top: 0;
}
#menu li:hover ul li:last-child{
border-bottom: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.