422,530 Members | 1,028 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 422,530 IT Pros & Developers. It's quick & easy.

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

P: n/a
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;
<!-- background-color: red; -->
}
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="#">Overview</a>
<a href="#">Management</a>
<a href="#">Partners</a>
<a href="#">FAQ's</a>
<a href="#">Careers</a>
<a href="#">Contact</a>
<div class="popup">
<div>Knowledge Centre(submenu)</div>
<a href="#">Documents</a>
<a href="#">Multimedia Center</a>
<!--</div> -->
</div>
</div>
</div>

<div class="menu">
<div>Services</div>
<div class="popup">
<a href="#">Overview</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>Operations </div>
<div class="popup">
<a href="#">Overview</a>
<a href="#">Facilities</a>
<a href="#">Hiring</a>
<a href="#">Training</a>
<a href="#">Quality</a>
<a href="#">Product Mgmt</a>
<div class="popup">
<div> Client Mgmt (submenu)</div>
<a href="#">Reporting</a>
<a href="#">Scalability Mgmt</a>
<a href="#">Implementation</a>
<!-- </div> -->
</div>
</div>
</div>

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

<a href="#">Workforce Mgmt</a>
<a href="#">Quality Assurance</a>
<a href="#">Training</a>
<a href="#">Reporting</a>
<a href="#">Knowledge Mgmt</a>
<a href="#">Silent Monitoring Rec.</a>
<!-- </div> -->
</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>

Jul 21 '05 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.