473,881 Members | 1,700 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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="#">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>

<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>

<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>

<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
0 16176

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
12442
by: kAldam | last post by:
I am currently using IE 6.0 and 5.5 and the scenario is the following. I have a span that contains text, and the span is beign contained by a table cell (this is the way thing need to be in my application). I have an issue when the span has a heigth less than 18px (meaning height of the span, there is only one line of text and the height of the text is less than 18). The issue is that I start getting a padding, I add a color background to...
8
30920
by: abracad | last post by:
Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?
1
7907
by: Kenneth | last post by:
Okay, I've been scouring Google for hours looking for a solution to this problem, but as of yet I can't find one. XHTML Transitional seems to specify that I can no longer set a table's height to 100% and vertically center content inside of it. Therefore, I'm seeking a way, preferably in CSS to vertically center a site. Here's more of a visual to what I have: /********************************
10
2949
by: John Baker | last post by:
Hi: I have a user who has labels that are set up 3 across and 11 vertical (which is unusual at best), and he wants me to print names and addresses on them. I have already set up for labels 10 vertical and 3 across (Avery 5160)which are another standard the user has, but can't find any in the setup for labels that show 11 vertical. I am therefore using the Avery 5160 as a start, and modifying the top and bottom margins (the margins on the...
0
1653
by: GiladP1 | last post by:
Hi, I am trying to create a vertical label or a vertical text box by useing their 'Vertical' property. But the text just disapears. I can manage to get right-to-left text to be vertical but English letters don't work. I am using Access 2003 on Windows XP. I tried using 2k format or 2003 format and both didn't work. Can anybody help? Thanks
2
12148
by: Eric Lindsay | last post by:
If I want to have the middle of an image vertically aligned with the middle of a heading (or several lines of heading), is there some particular way people would recommend? vertical-align: center looked made for that. The effect I want is img heading img heading img heading or heading
4
2260
by: shivas | last post by:
Hi, I am using vertical-align for a table row, but the Image and the text are not aligned properly. I don't what to align image in the img tag, rather in the row itself I want to align. I want to align both text and the image (some time appended in the same cell) in the top. Can anyone help me in this? --
5
4834
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up doing this demo with tables. The main problems are the vertical centering of the info area, and of the text inside the squares.
3
5170
by: Spiros Bousbouras | last post by:
The fact that vertical tab and form feed exist both in the basic source character set and the basic execution character set suggests to me that there is a class of display devices where vertical tab and form feed produce a predictable and consistent (among different devices) behaviour. So what are these devices and what is the behaviour ? For old printers , form feed presumably moves to the next page but vertical tab is a mystery to me.
40
5520
by: maya | last post by:
hi, how do I get text to vertical-align inside a div? http://www.mayacove.com/misc/home.html vertical-align should work, according to this: http://htmlhelp.com/reference/css/text/vertical-align.html
0
9930
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
9776
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11103
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10819
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7113
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5781
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5978
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4597
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3225
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.