Mon, 2010-01-25 10:08
Here is an example of a drop down menu.
HTML code :
<html> <head> <title>A DOM drop-down menu</title> <link rel="stylesheet" type="text/css" href="dropdown.css"> <script language="javascript" type="text/javascript" src="dropdown.js"> </script> </head> <body> <h1>Menu Test</h1> <ul id="menu"> <li class="menu"><a href="#">Home</a></li> <li class="menu"><a href="#">Products</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> <li class="menu"><a href="#">Support</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> </ul> </li> <li class="menu"><a href="#">Employment</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> </ul> </li> <li class="menu"><a href="#">Contact Us</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> </ul> </li> </ul> </body> </html>
CSS code :
/* The whole menu */ #menu { position: absolute; } /* Each menu name */ #menu li { float: left; list-style-type: none; padding-right: 20px; width: 100px; background-color: silver; } /* The entire submenu */ #menu li ul { background-color: silver; margin: 0px; padding: 0px; } /* Each submenu item */ #menu li ul li { padding: 0px; margin: 0px; float: none; list-style-type: none; width: 80px; }
My question is: How can i change the CSS code in order to make the main menus be displayed vertically and submenus horizontally,the opposite of what they are now in the above codes.So far i managed to change the main menus from horizontal to vertical positions but cant seem to achieve in making the opposite for the submenus.Here is the code i used for the main menus:
CSS code for main menus:
/* The whole menu */ #menu { position: absolute; font-family: sans-serif; font-size: 100%; } /* Each menu name */ #menu li { position:relative; list-style-type: none; background-color: silver; border: 1px solid black; text-indent: 0px; margin-left: 3px; } /* each main menu link */ #menu li a { color: black; text-decoration: none; width:100%; display:block; } #menu li a:hover { color: white; } /* The entire submenu */ #menu li ul { background-color: silver; margin: 0px; padding: 0px; } /* Each submenu item */ #menu li ul li { position:relative; top: 0; left: 100%; /* to position them to the right of their containing block */ padding: 0px; margin: 0px; list-style-type: none; text-indent: 0px; border: none; } #menu li ul li a{ color: black; text-decoration: none; } #menu li ul li a:hover{ color: black; background-color: aqua; }
Any help would be really appreciated.