I need dropdown menubar new style sheet

I need dropdown menubar new style sheet

There is an easy way to create a drop down menus using XHTML and CSS only in all modern browsers. You don’t need any advance javascript or even flash to create this menu. Just follow and download the following instruction and files here.

1. Create an XHTML uses the following codes (you can also see the attached file XHTML).

   <ul id="navbar"> <li><a href="#">Item One</a><ul> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">Numero Tres</a></li></ul> </li> <!-- ... and so on ... --> </ul>

   With this XHTML, the main list and subnavigation elements will be working correctly and properly. The navigation bar can be also work without those submenus, you just need to mix and match as it needs.

2. Next, we will not create styles to our navigation or menu bar ( you can also download the STYLE file).

   #navbar { margin: 0; padding: 0; height: 1em; } #navbar li { list-style: none; float: left; } #navbar li a { display: block; padding: 3px 8px; background-color: #5e8ce9; color: #fff; text-decoration: none; }

   In this CSS style, I place the individual items to the left and added some styling to the anchors to make the navigation bar look good. The rule that put for the navbar ID which is “height:1em;” force the navigation bar to have a specific height and width. As long as the height is specified, the list will retain its block-level position.

3. Create some style on the submenu section

   #navbar li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #69f;}

   This style will create and display of what will be the look for the submenus of the listed items in the navigation. You can adjust the background-color or also can specify what font, size , and color on the submenus items.

4. Create a style for the hover

   #navbar li:hover ul { display: block; position: absolute; margin: 0; padding: 0; } #navbar li:hover li { float: none; } #navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; } #navbar li li a:hover { background-color: #8db3ff; }

   In this style, it will show on how the submenu will show when the mouse will hover on the selected item. You can change the background-color, font color and even adjust the border.