CSS navigation bar with hover and drop-down.
A Pen by Joao Nascimento on CodePen.
<body> | |
<ul class="menu"> | |
<li><a href="#">Main</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Game</a> | |
<ul> | |
<li><a href="#" class="audio">Story</a></li> | |
<li><a href="#" class="video">Character</a></li> | |
<li><a href="#" class="accessories">Concept art</a></li> | |
</ul> | |
</li> | |
<li><a href="#"></a></li> | |
<li><a href="#">Blog</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</body> | |
</html> |
body { | |
background: -webkit-radial-gradient(circle, #4c4e5a, #2c2d33); | |
} | |
.menu, | |
.menu ul, | |
.menu li, | |
.menu a { | |
margin:0; | |
padding: 0; | |
border: 0; | |
outline: 0; | |
} | |
.menu { | |
height: 40px; | |
width: 505px; | |
margin: 50px auto; | |
background: #4c4e5a; | |
background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%) | |
background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%) | |
background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%) | |
background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%) | |
background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%) | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
} | |
.menu li { | |
position: relative; | |
list-style: none; | |
float: left; | |
display: block; | |
height: 40px; | |
} | |
.menu ul { | |
position: absolute; | |
top: 40px; | |
left: 0; | |
opacity: 0; | |
background: #1f2024; | |
-webkit-transition: opacity .25s ease .1s; | |
-moz-transition: opacity .25s ease .1s; | |
-o-transition: opacity .25s ease .1s; | |
-ms-transition: opacity .25s ease .1s; | |
transition: opacity .25s ease .1s; | |
} | |
.menu li:hover > ul { opacity: 1; } | |
.menu ul li { | |
height: 0; | |
overflow: hidden; | |
padding: 0; | |
-webkit-transition: height .25s ease .1s; | |
-moz-transition: height .25s ease .1s; | |
-o-transition: height .25s ease .1s; | |
-ms-transition: height .25s ease .1s; | |
transition: height .25s ease .1s; | |
} | |
.menu ul li a { | |
width: 100px; | |
padding: 4px 0 4px 40px; | |
margin: 0; | |
border: none; | |
border-bottom: 1px solid #353539; | |
} | |
.menu ul li:last-child a { border: none; } | |
.menu li:hover > ul li { | |
height: 36px; | |
overflow: visible; | |
padding: 0; | |
} | |
.menu li a { | |
display: block; | |
padding: 0 14px; | |
margin: 6px 0; | |
line-height: 28px; | |
text-decoration: none; | |
border-left: 1px solid #393942; | |
border-right: 1px solid #4f5058; | |
font-family: Helvetica, Arial, sans-serif; | |
font-weight: bold; | |
font-size: 13px; | |
color: #f3f3f3; | |
text-shadow: 1px 1px 1px rgba(0,0,0,.6); | |
-webkit-transition: color .2s ease-in-out; | |
-moz-transition: color .2s ease-in-out; | |
-o-transition: color .2s ease-in-out; | |
-ms-transition: color .2s ease-in-out; | |
transition: color .2s ease-in-out; | |
} | |
.menu li:first-child a { border-left: none; } | |
.menu li:last-child a { border-right: none; } | |
.menu li:hover > a { color: #8fde62; } | |
/*.menu a.audio { background: url(../img/audio_console_24.png) no-repeat 6px center; } | |
.menu a.video { background: url(../img/pro_video_cam_24.png) no-repeat 6px center; } | |
.menu a.accessories { background: url(../img/switch_on_24.png) no-repeat 6px center; }*/ |
Alright, every things good. Just trying to figure out how to increase and decrease a tab according to the submenu size.