• Locked
No replies
Mon, 2010-01-25 10:08
xrats
Offline
newbie
Last seen: 11 years 1 day ago
Timezone: GMT+2
Joined: 2010-01-25
Posts: 1
Points: 2

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.

Top
Tags: