CSS vertical pop-down menu ...sub-menu drop down problem

**vikram.cvk@gmail.com** · Jul 21 '05, 12:41 AM

Hello Experts,

Im trying to design a CSS vertical drop down menu which should have the
following functionality.

Home
About Us
|
-->Overview
Management
Partners
FAQ's
Careers
Contact
Knowledge Center(Sub Menu)
|
-> Documents
Multimedia Center
Services
|
-->Overview (Sub Menu)
Mist Mail
Mist Chat
Mist Voice
Mist BPO
Operations
|
-->Overview
Facilities
Hiring
Training
Quality
Product Mgmt
Client Mgmt
|
-->Reporting (Sub Menu)
Scalability Mgmt
Implementation
Technology
|
-->Overview
Mist Voice
Mist Network
Mist Software
|
-->Workforce Mgmt (Sub Menu)
Quality Assurance
Training
Reporting
Knowledge Mgmt
Silent Monitoring Rec
News & Events
Tour Mist
Client Mist

Im using the hover element to get the mouse over effect.On the whole
the main menu is working properly i.e if I move my mouse over the menu
item areas like "About US" ,"Operations " then the pop-down menus open
up but the problem is even the submenus are also opening up i.e if I
select "Operations " from the main menu list then along with the
drop-down list of Operations even the sub-menu "Client Mgmt" drop-down
list is also opening up.

I want the sub-menus should open up only when the user moves his
mouse over that area.

You can have the look at the semi-finished menu for complete
understanding.. ..plz click on the following link

http://www.strokefx.com/v-simplemenu3.html

Note:Open the file in "Firefox" or "Mozilla" or "Opera" browsers,
this particular menu does'nt work in IE browser(IE does not support
'hover' element of CSS)

Kindly help me out .....plz tell me wot all changes to the above code
have to be made to stop the sub-menus from opening up ...

Thanks in advance!

Swiftguy

The source code of the my menu file is as follows
----------------------------------------------------------

<html>
<head>
<style>
body { font-family: Verdana;font-size:12px; }

div.mainmenu {
position: absolute;
left: 0px;
top: 0px;
font-weight: bold;
z-index: 1;
}

div.menu {
float: bottom;
margin-left: 10px;
}

div.popup a:hover { background-color: #ffa; }
div.menu:hover div:first-child { border-bottom: none; }
div.menu div.popup { display: none; }
div.menu:hover div.popup {
display: block;
background-color: #99f;

}

div.menu div {
width: 175px;
background-color: #66f;
padding: 5px;
border: solid 2px blue;
margin-left:2px;
}
div.menu2 {
width: 175px;
background-color: #66f;
padding: 5px;
border: solid 2px blue;
margin-left:2px;
}

div.popup div, div.popup a { display:block; text-decoration: none;
margin: 2px 4px 2px -7px; }
div.popup div + div, div.popup a + a { margin-top: 10px;margin-left:1;
}

div.content {
position: absolute;
left: 20px;
top: 195px;
border: 1px dashed gray;
}

</style>
</head>

<body>

<div class="mainmenu " id="mainmenu">
<div class="menu">
<div>Home</div>
</div>

<div class="menu">
<div>About US </div>
<div class="popup">
<a href="#">Overvi ew</a>
<a href="#">Manage ment</a>
<a href="#">Partne rs</a>
<a href="#">FAQ's</a>
<a href="#">Career s</a>
<a href="#">Contac t</a>
<div class="popup">
<div>Knowledg e Centre(submenu) </div>
<a href="#">Docume nts</a>
<a href="#">Multim edia Center</a>

</div>
</div>
</div>

<div class="menu">
<div>Services </div>
<div class="popup">
<a href="#">Overvi ew</a>
<a href="#">Knoah Mail</a>
<a href="#">Knoah Chat</a>
<a href="#">Knoah Voice</a>
<a href="#">Knoah BPO</a>

</div>
</div>

<div class="menu">
<div>Operatio ns </div>
<div class="popup">
<a href="#">Overvi ew</a>
<a href="#">Facili ties</a>
<a href="#">Hiring </a>
<a href="#">Traini ng</a>
<a href="#">Qualit y</a>
<a href="#">Produc t Mgmt</a>
<div class="popup">
<div> Client Mgmt (submenu)</div>
<a href="#">Report ing</a>
<a href="#">Scalab ility Mgmt</a>
<a href="#">Implem entation</a>

</div>
</div>
</div>

<div class="menu">
<div>Technology </div>
<div class="popup">
<a href="#">Overvi ew</a>
<a href="#">Knoah Voice</a>
<a href="#">Knoah Network</a>
<div class="popup">
<div> Knoah Software (submenu) </div>

<a href="#">Workfo rce Mgmt</a>
<a href="#">Qualit y Assurance</a>
<a href="#">Traini ng</a>
<a href="#">Report ing</a>
<a href="#">Knowle dge Mgmt</a>
<a href="#">Silent Monitoring Rec.</a>

</div>
</div>
</div>

<div class="menu">
<div>News & Events</div>
</div>

<div class="menu">
<div>Tour Knoah</div>
</div>

<div class="menu">
<div>Client Gateway</div>
</div>

</div>

</body>
</html>