CSS menu

Hey,

depends on your code.
You can check some great examples while searching on google ;)

Also CSS can be different in case that a navigation should be reponsive.

Just an example for a vertical navigation

#subnav {
background:url(../images/subnav.png);
background-repeat:no-repeat;
height:298px;
width:300px;
position:absolute;
z-index:3;
font-size:0.8em;
}
#subnav ul {
list-style:none;
margin:0px;
padding:0px;
padding-left:10px;
padding-top:10px;
}
#subnav ul li {
margin:0px;
padding:0px;
}
#subnav ul li a {
background-image:url(../images/li.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:25px;
color:white;
text-decoration:none;
display:block;
margin-right:26px;
padding-top:5px;
padding-bottom:5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#subnav ul li a:hover {
background-image:url(../images/li.png);
background-color:#7e0043;
background-position:left center;
background-repeat:no-repeat;
padding-left:25px;
color:white;
text-decoration:none;
}

the html should look like this:

<div id="subnav">
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>
</div>
 
Back
Top