This is a simple css horizontal menu (Prefect forJoomla).

HTML:

<div id="top">

<ul>

<li id="current"><a href="#">Home0</a></li>

<li><a href="#">Home2</a></li>

<li><a href="#">Home3</a></li>

<li><a href="#">Home4</a></li>

<li><a href="#">Home5</a></li>

<li><a href="#">Home6</a></li>

<li><a href="#">Home7</a></li>

</ul>

</div>

 

CSS:

#top {
background:#999;
width:1000px;
margin:0 auto;
}

#top ul {
height:37px;
padding:0;
margin:0;
border:0;
}

#top ul li {
line-height:2.3em;
display:block;
float:left;
text-align:center;
padding:0px;
margin:0;
height: 37px
}

#top ul li:hover {
background:#333;
color:#fff;
}


#top ul li a{
font-size:12px;
width: 123px;
height: 37px;
border-left: 1px solid #ccc;
padding: 0;
margin: 0 0 10px 0;
color: #333;
text-decoration: none;
display: block;
text-align: center;
}

#top ul li a:hover{
color: #fff;
background:#F7931E;
}

#top ul li a:active {
color: #fff;
background:#F7931E;
}


#top ul li#current a{
color: #fff;
background:#ff0000;
}

About Author
Riaz Uddin Masum
Web Master
Hi, I am Riaz Uddin Masum, This is my play ground for web and IT. I like to read and write about any IT related Topic. I love to Design and Develop web site. it is my job too. My objective is to establish my career in web.
Other articles

Our website is protected by DMC Firewall!