Dark Horizontal Menu with CSS and HTML

Dark Horizontal Menu with Css and Html / Menu oscuro horizontal con Css y Html

By Fivera

HTML

<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact</a></li>
 
</ul>
CSS

body{font:13px/20px 'Lucida Grande',Tahoma,Verdana,sans-serif;color:#404040;background:#303335;display:flex;justify-content:center;align-content:center}
.nav{margin-top:94px;height:48px;display:inline-block;list-style:none}
.active,.nav li{float:left;position:relative;margin:0 0 4px;height:44px;color:#ccc;text-shadow:0 1px rgba(0,0,0,.9);background-color:rgba(0,0,0,.05);border:1px solid #232428;border-bottom-color:#1f2326;background-image:-webkit-linear-gradient(top,rgba(255,255,255,.08),rgba(255,255,255,0));background-image:-moz-linear-gradient(top,rgba(255,255,255,.08),rgba(255,255,255,0));background-image:-o-linear-gradient(top,rgba(255,255,255,.08),rgba(255,255,255,0));background-image:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(255,255,255,0));-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 2px #262a2e,0 3px #1f2326,0 4px 3px rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 2px #262a2e,0 3px #1f2326,0 4px 3px rgba(0,0,0,.2)}
.nav li:hover{color:#b0d157;text-shadow:0 1px black,0 0 20px rgba(255,255,255,.5)}
.nav .active:active,.nav li.active,.nav li:active{z-index:2;margin:4px 0 0;height:43px;color:#aaa;text-shadow:0 1px #000;background-color:rgba(255,255,255,.03);border-color:#212425;background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,0));-webkit-box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -1px 1px rgba(0,0,0,.15),1px 0 rgba(0,0,0,.05),-1px 0 rgba(0,0,0,.05),0 1px rgba(255,255,255,.05);box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -1px 1px rgba(0,0,0,.15),1px 0 rgba(0,0,0,.05),-1px 0 rgba(0,0,0,.05),0 1px rgba(255,255,255,.05)}
.nav li a{display:block;line-height:44px;padding:0 20px;font-size:12px;font-weight:700;color:inherit;text-decoration:none;outline:0}
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Navbar Responsive Horizontal with Bootstrap
menu sidebar vertical with active class css
Vertical color-adapting CSS menu