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>
