Simple css 1 level horizontal menu

Hi friends,

here is a simple example of 1 level horizontal navigation menu.

for this i am using 2 images - one is orange and another is blue

you can copy these images from here 

1) Orange image

2) Blue image

For creating a "1 level horizontal navigation menu" we are going to use "unordered list"

<br /><ul id="horizontal"><br /> <li><a href="http://programming-in-php.blogspot.com" target="_blank">Home</a></li><br /> <li><a href="http://vaibhavsk.blogspot.com" target="_blank">Network</a></li><br /> <li><a href="http://www.chaprak.com">Topics</a></li><br /> <li><a href="http://jokestube.blogspot.com" target="_blank">Jokes</a></li><br /></ul><br />

Now this will create an unordered list.

Now we will apply a CSS to this unordered list to make it a horizontal navigation menu.

<br />#horizontal,#horizontal ul {<br /> list-style:none;<br />}<br />#horizontal li {<br />display:inline;<br />border:none 0px;<br />float:left;<br />padding:2px;<br />}<br />#horizontal li a {<br />border:solid 1px #0000FF;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih1x7rB2-tba5HIDdiPUHVpbvc9DlYb3P8g2hid7XpZSR3GVxDGH8VQw6w5bsokFKHwwus1UDeAuFuhWUwVt749ldPhMdVB6FBFMGWECYmy1gmJAMaKm_K_Z9QULTQo-36HBuwz5wVzhY/s400/orangemenu1.png) repeat bottom;<br />color: #FFFFFF;<br />font-weight:bold;<br />display:block;<br />text-decoration:none;<br />padding:2px 18px;<br />margin:2px;<br />font-family:Verdana, Arial, Helvetica, sans-serif;<br />}<br />#horizontal li a:hover {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5IkWHav7WWUFexNKzN7V9osNNDBfAPCVOT17f9QH44d9VrjULRj6IWBTg-yg5NVcsDkCirOdu8aXlsglnjeAskDOztr2QIVEidKirW_5CYH9yaokWq0mZhSzyqNmBpFgi4GDejrR-fho/s400/bluemenu1.png) repeat;<br />border: solid 1px #000000;<br />color:#000000;<br />}<br />

Hey ! Its ready ! See it !





Completed ready use script and code is here
<br /><br /><br />#horizontal,#horizontal ul {<br /> list-style:none;<br />}<br />#horizontal li {<br />display:inline;<br />border:none 0px;<br />float:left;<br />padding:2px;<br />}<br />#horizontal li a {<br />border:solid 1px #0000FF;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih1x7rB2-tba5HIDdiPUHVpbvc9DlYb3P8g2hid7XpZSR3GVxDGH8VQw6w5bsokFKHwwus1UDeAuFuhWUwVt749ldPhMdVB6FBFMGWECYmy1gmJAMaKm_K_Z9QULTQo-36HBuwz5wVzhY/s400/orangemenu1.png) repeat bottom;<br />color: #FFFFFF;<br />font-weight:bold;<br />display:block;<br />text-decoration:none;<br />padding:2px 18px;<br />margin:2px;<br />font-family:Verdana, Arial, Helvetica, sans-serif;<br />}<br />#horizontal li a:hover {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5IkWHav7WWUFexNKzN7V9osNNDBfAPCVOT17f9QH44d9VrjULRj6IWBTg-yg5NVcsDkCirOdu8aXlsglnjeAskDOztr2QIVEidKirW_5CYH9yaokWq0mZhSzyqNmBpFgi4GDejrR-fho/s400/bluemenu1.png) repeat;<br />border: solid 1px #000000;<br />color:#000000;<br />}<br /><br /><br /><ul id="horizontal"><br /> <li><a href="http://programming-in-php.blogspot.com" target="_blank">Home</a></li><br /> <li><a href="http://vaibhavsk.blogspot.com" target="_blank">Network</a></li><br /> <li><a href="http://www.chaprak.com">Topics</a></li><br /> <li><a href="http://jokestube.blogspot.com" target="_blank">Jokes</a></li><br /></ul><br />