Creating horizontal Sub-Navigation with CSS

For those of you who like creating and modifying website template, you should know that one section that you have to create is Navbar (Navigation Bar) that functions to place the menus of a blog or website. Well, at this post, I will give the tutorial about how to create the horizontal sub navigation with CSS.

But before I give the tutorial, you can view the example of horizontal sub navigation that I have created. Please click the image below to view the live demo.

What do you think? Are you interested in creating the horizontal sub-navbar? If yes, please follow the steps below:

Please copy and place the CSS code below between the codeor if you are confused, you can place exactly above the code]]>

ul#topnav {margin: 0; padding: 0;float: left;width: 960px;list-style: none;position: relative;font-size: 12px;background: url(http://i28.tinypic.com/6nxug1.gif) repeat-x;}

ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #555;}

ul#topnav li a {padding: 7px 15px;display: block;color: #f0f0f0;text-decoration: none;}

ul#topnav li:hover { background: #27990A url(http://i28.tinypic.com/2crrmyu.png) repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:34px;display: none;width: 960px;background: #27990A;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}

ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}

Then copy the JavaScript below and paste under the code ]]> above the code