facebook twitter youtube
in Css - 18 Apr, 2014, This Tutorial Has Been Viewed 6,358 Times.
by admin - no comments
Standard horizontal menu using css
VN:F [1.9.22_1171]
Rating: 7.0/10 (1 vote cast)

A very simple css horizontal menu, just copy paste the script below.

<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

VN:F [1.9.22_1171]
Rating: 7.0/10 (1 vote cast)
Standard horizontal menu using css , 7.0 out of 10 based on 1 rating


coded by nessus

Leave a Reply

Close
Please support the site
By clicking any of these buttons you help our site to get better