Horizontal menu using css and html

Last updated on November 16th, 2015 at 09:59 am

A very simple css horizontal menu, just copy paste the script below. We are also using simple HTML complete the menu.

<style type='text/css'>

#menu {text-align:left;height:36px;background:url(http://mistonline.in/wp/download/menu.gif) repeat-x top;padding:0px 10px 0px 10px;vertical-align: top;margin:0px 4px 0px 4px;}

#menu ul {height:36px; width:100%;overflow:hidden;}

#menu li {  font: 15px Arial, Helvetica, sans-serif; display: inline;  margin-right: 10px; padding:5px 0px 5px 0px; font-weight:bold; line-height:36px;height:36px;}

#menu li a {  color: #494949;  text-decoration: none;}

#menu li a:hover {color: #333;text-decoration: underline;}

</style>

<div id="menu">

<ul>

<li><a href="#" title="#">Home</a></li>

<li><a href="#" title="#">Blogging Tips</a></li>

<li><a href="#" title="#">HTML</a></li>

<li><a href="#" title="#">CSS</a></li>

<li><a href="#" title="#">JQuery</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">Support</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>

</div>

DEMO