Category Archives: css Menu

css Attractive Horizontal Menu

html/xhtml

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Mision</a></li>
 <li><a href="#">Vision</a></li>
 <li><a href="#">Forum</a></li>
</ul>

css

*{margin:0;padding:0;}
ul{
 margin:0;
 list-style:none;
}
ul li{
 float:left;
 width:100px;
 border:3px solid #FF0000;
 padding:5px;
 margin:0px 5px;

}
ul li a{
 border:3px solid #990033;
 padding:5px;
 display:block;
 color:#000000;
 text-decoration:none;
 text-align:center;
}
ul li:hover{
 border:3px solid #990033;
}

ul li a:hover{
 border:3px solid #FF0000;
 Vertical-align:
}

css Attractive Vertical Menu

html


<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Overview</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Expertice</a></li>
 <li><a href="#">Contact</a></li>
 </ul>

css

*
{
 margin:0;
 padding:0;
}
ul
{
 list-style:none;
 width:300px;
}
ul li
{
 color:#000000;
 background:#6699FF;
 padding:5px;
 margin:5px;
}
ul li a
{
 text-decoration:none;
 color:#FF0000;
 display:block;
 border-right:20px solid #FFFFFF;
}
ul li a:hover
{
 text-decoration:none;
 color:#FFFFFF;
 display:block;
 border-right:20px solid #FF0000;
}