CSS Menu Positioning

Hello,
I have a CSS Horizontal dropdown menu and the drop down menu is pushed to the right instead of directly underneath the heading. I am completely new to CSS and I do not yet know exactly what I am looking at in the CSS file. Any idea on how I can get it positioned correctly?
Coding as follows:

CSS style sheet:
--------------------------------------------------------

Expand|Select|Wrap|Line Numbers

 /* Begin CSS Drop Down Menu */ 
 
#menu { 

width: 100%; 

background: #eee; 

float: left; 

} 

#menu ul { 

list-style: none; 

margin: 0; 

padding: 0; 

width: 12em; 

float: left; 

} 
 
#menu a, #menu h2 { 

font: bold 11px/16px arial, helvetica, sans-serif; 

display: block; 

border-width: 1px; 

border-style: solid; 

border-color: #ccc #888 #555 #bbb; 

margin: 0; 

padding: 2px 3px; 

} 
 
#menu h2 { 

color: #fff; 

background: #000; 

text-transform: uppercase; 

} 
 
#menu a { 

color: #000; 

background: #efefef; 

text-decoration: none; 

} 
 
#menu a:hover { 

color: #a00; 

background: #fff; 

} 
 
#menu li {position: relative;} 
 
#menu ul ul { 

position: absolute; 

z-index: 500; 

} 
 
#menu ul ul ul { 

top: 0; 

left: 100%; 

} 
 
div#menu ul ul, 

div#menu ul li:hover ul ul, 

div#menu ul ul li:hover ul ul 

{display: none;} 
 
div#menu ul li:hover ul, 

div#menu ul ul li:hover ul, 

div#menu ul ul ul li:hover ul 

{display: block;} 
 
<!--[if IE]> 

<style type="text/css" media="screen"> 

body { 

behavior: url(csshover.htc); 

font-size: 100%; 

} 
 
#menu ul li {float: left; width: 100%;} 

#menu ul li a {height: 1%;} 
 
#menu a, #menu h2 { 

font: bold 0.7em/1.4em arial, helvetica, sans-serif; 

} 

</style> 

<![endif]-->

--------------------------------------------------------

HTML as follows (sorry...I know it's long but I to make sure I get it right in the end):
-----------------------------------------------

Expand|Select|Wrap|Line Numbers

 <div id="menuhcontainer"> 

<div id="menu"> 

<ul style="width: 15%"> 

<li><a href="http://www.site.com/bathroomfans/" class="topparent">Ventilation</a> 

<ul> 

<li><a title="Bathroom Fans" href="http://www.site.com/bathroomfans/" class="parent">Bathroom Fans</a> 

<ul> 

<li id="child"><a title="Ceiling Mounted Bathroom Fans" href="http://www.site.com/bathroomfans/102/" class="child">Ceiling Mounted</a></li> 

<li><a title="Fans with Lights" href="http://www.site.com/bathroomfans/181/" class="child">Fans with Lights</a></li> 

<li><a title="Fans with Heaters" href="http://www.site.com/bathroomfans/182/" class="child">Fans with Heaters</a></li> 

<li><a title="Decorative Fans" href="http://www.site.com/bathroomfans/183/" class="child">Decorative Fans</a></li> 

<li><a title="Humidity Sensor Fans" href="http://www.site.com/bathroomfans/184/" class="child">Humidity Sensor Fans</a></li> 

<li><a title="Recessed Fans" href="http://www.site.com/bathroomfans/185/" class="child">Recessed Fans</a></li> 

<li><a title="Remote Inlins Fans" href="http://www.site.com/bathroomfans/186/" class="child">Remote Inline Fans</a></li> 

<li><a title="Wall Mounted Fans" href="http://www.site.com/bathroomfans/187/" class="child">Wall Mounted Fans</a></li> 

<li><a title="Exterior Mounted Fans" href="http://www.site.com/bathroomfans/188/" class="child">Exterior Mounted Fans</a></li> 

<li><a title="Passive Inlet Fans" href="http://www.site.com/bathroomfans/190/" class="child">Passive Inlet Fans</a></li> 

<li><a title="Timers and Controls" href="http://www.site.com/bathroomfans/192/" class="child">Timers & Controls</a></li> 

<li><a title="In-Shower Fans" href="http://www.site.com/bathroomfans/193/" class="child">In-Shower Fans</a></li> 

<li><a title="Ductless Fans" href="http://www.site.com/bathroomfans/194/" class="child">Ductless Fans</a></li> 

<li><a title="Fire-Rated Fans" href="http://www.site.com/bathroomfans/195/" class="child">Fire-rated Fans</a></li> 

<li><a title="Energy Star® Fans" href="http://www.site.com/bathroomfans/548/" class="child">Energy Star® Fans</a></li> 

<li><a title="Motion Sensor Fans" href="http://www.site.com/bathroomfans/661/" class="child">Motion Sensor Fans</a></li> 

<li><a title="Eco-Friendly Fans" href="http://www.site.com/bathroomfans/211/" class="child">Eco-Friendly Fans</a></li> 

</ul> 

</li> 

<li><a title="Range Hoods" href="http://www.site.com/rangehoods/" class="parent">Range Hoods</a> 

<ul> 

<li><a title="Wall Chimney Range Hoods" href="http://www.site.com/rangehoods/100/" class="child">Wall Chimney Range Hoods</a></li> 

<li><a title="Island Range Hoods" href="http://www.site.com/rangehoods/103/" class="child">Island Range Hoods</a></li> 

<li><a title="Under Cabinet Range Hoods" href="http://www.site.com/rangehoods/104/" class="child">Under Cabinet Range Hoods</a></li> 

<li><a title="Ductless Range Hoods" href="http://www.site.com/rangehoods/105/" class="child">Ductless Range Hoods</a></li> 

<li><a title="Ventilator Power Packs" href="http://www.site.com/rangehoods/106/" class="child">Ventilator Power Packs</a></li> 

<li><a title="Outdoor Range Hoods" href="http://www.site.com/rangehoods/107/" class="child">Outdoor Range Hoods</a></li> 

<li><a title="Wood Hoods" href="http://www.site.com/rangehoods/108/" class="child">Wood Hoods</a></li> 

</ul> 

</li> 

<li><a title="Whole House Fans" href="http://www.site.com/wholehousefans/" class="parent">Whole House Fans</a> 

<ul> 

<li><a title="CVS Inline Fans" href="http://www.site.com/wholehousefans/645/" class="child">CVS Inline Fans</a></li> 

<li><a title="Heat Recovery Systems" href="http://www.site.com/wholehousefans/646/" class="child">Heat Recovery Systems</a></li> 

<li><a title="HEPA Filtration Units" href="http://www.site.com/wholehousefans/647/" class="child">HEPA Filtration Units</a></li> 

<li><a title="Air Exchangers" href="http://www.site.com/wholehousefans/648/" class="child">Air Exchangers</a></li> 

<li><a title="Energy Recovery Systems" href="http://www.site.com/wholehousefans/649/" class="child">Energy Recovery Systems</a></li> 

<li><a title="Attic Fans" href="http://www.site.com/wholehousefans/650/" class="child">Attic Fans</a></li> 

<li><a title="Accessories" href="http://www.site.com/wholehousefans/651/" class="child">Accessories</a></li> 

</ul> 

</li> 

<li><a title="Dryer Booseter Fans" href="http://www.site.com/dryerboosterfans/" class="parent">Dryer Booster Fans</a> 

<ul> 

<li><a title="Dryer Booster Fans" href="http://www.site.com/dryerboosterfans/" class="child">Dryer Booster Fans</a></li> 

<li><a title="Dryer Booster Fan Accessories" href="http://www.site.com/dryerboosterfans/643/" class="child">Accessories</a></li> 

</ul> 

</li> 

<li><a title="Utility Fans" href="http://www.site.com/utilityfans/" class="parent">Utility Fans</a> 

<ul> 

<li><a title="Wall Mounted Utility Fans" href="http://www.site.com/utilityfans/638/" class="child">Wall Mounted Utility Fans</a></li> 

<li><a title="Inline Utility Fans" href="http://www.site.com/utilityfans/639/" class="child">Inline Utility Fans</a></li> 

<li><a title="Utility Fan Accessories" href="http://www.site.com/utilityfans/640/" class="child">Utility Fans Accessories</a></li> 

</ul> 

</li> 

</ul></li> 

</ul> 

<ul style="width: 15%"> 

<li><a title="fans" href="http://www.site.com/aircirculation/" class="topparent">Fans</a> 

<ul> 

<li><a title="Bathroom Fans" href="http://www.site.com/bathroomfans/" class="parent">Bathroom Fans</a> 

<ul> 

<li id="child"><a title="Ceiling Mounted Bathroom Fans" href="http://www.site.com/bathroomfans/102/" class="child">Ceiling Mounted</a></li> 

<li><a title="Fans with Lights" href="http://www.site.com/bathroomfans/181/" class="child">Fans with Lights</a></li> 

<li><a title="Fans with Heaters" href="http://www.site.com/bathroomfans/182/" class="child">Fans with Heaters</a></li> 

<li><a title="Decorative Fans" href="http://www.site.com/bathroomfans/183/" class="child">Decorative Fans</a></li> 

<li><a title="Humidity Sensor Fans" href="http://www.site.com/bathroomfans/184/" class="child">Humidity Sensor Fans</a></li> 

<li><a title="Recessed Fans" href="http://www.site.com/bathroomfans/185/" class="child">Recessed Fans</a></li> 

<li><a title="Remote Inlins Fans" href="http://www.site.com/bathroomfans/186/" class="child">Remote Inline Fans</a></li> 

<li><a title="Wall Mounted Fans" href="http://www.site.com/bathroomfans/187/" class="child">Wall Mounted Fans</a></li> 

<li><a title="Exterior Mounted Fans" href="http://www.site.com/bathroomfans/188/" class="child">Exterior Mounted Fans</a></li> 

<li><a title="Passive Inlet Fans" href="http://www.site.com/bathroomfans/190/" class="child">Passive Inlet Fans</a></li> 

<li><a title="Timers and Controls" href="http://www.site.com/bathroomfans/192/" class="child">Timers & Controls</a></li> 

<li><a title="In-Shower Fans" href="http://www.site.com/bathroomfans/193/" class="child">In-Shower Fans</a></li> 

<li><a title="Ductless Fans" href="http://www.site.com/bathroomfans/194/" class="child">Ductless Fans</a></li> 

<li><a title="Fire-Rated Fans" href="http://www.site.com/bathroomfans/195/" class="child">Fire-rated Fans</a></li> 

<li><a title="Energy Star® Fans" href="http://www.site.com/bathroomfans/548/" class="child">Energy Star® Fans</a></li> 

<li><a title="Motion Sensor Fans" href="http://www.site.com/bathroomfans/661/" class="child">Motion Sensor Fans</a></li> 

<li><a title="Eco-Friendly Fans" href="http://www.site.com/bathroomfans/211/" class="child">Eco-Friendly Fans</a></li> 

</ul> 

</li> 

<li><a title="celing Fans" href="http://www.site.com/aircirculation/627/" class="parent">Ceiling Fans</a> 

</li> 

<li><a title="Floor Fans" href="http://www.site.com/aircirculation/628/" class="parent">Floor Fans</a> 

</li> 

<li><a title="Table Fans" href="http://www.site.com/aircirculation/629/" class="parent">Table Fans</a> 

</li> 

<li><a title="Outdoor Fans" href="http://www.site.com/aircirculation/630/" class="child">Outdoor Fans</a></li> 

<li><a title="Fan Accessories" href="http://www.site.com/aircirculation/652/" class="child">Accessories</a></li> 
 
<li><a title="Utility Fans" href="http://www.site.com/utilityfans/" class="parent">Utility Fans</a> 

<ul> 

<li><a title="Wall Mounted Utility Fans" href="http://www.site.com/utilityfans/638/" class="child">Wall Mounted Utility Fans</a></li> 

<li><a title="Inline Utility Fans" href="http://www.site.com/utilityfans/639/" class="child">Inline Utility Fans</a></li> 

<li><a title="Utility Fan Accessories" href="http://www.site.com/utilityfans/640/" class="child">Utility Fans Accessories</a></li> 

</ul> 

<li><a title="Whole House Fans" href="http://www.site.com/wholehousefans/" class="parent">Whole House Fans</a> 

<ul> 

<li><a title="CVS Inline Fans" href="http://www.site.com/wholehousefans/645/" class="child">CVS Inline Fans</a></li> 

<li><a title="Heat Recovery Systems" href="http://www.site.com/wholehousefans/646/" class="child">Heat Recovery Systems</a></li> 

<li><a title="HEPA Filtration Units" href="http://www.site.com/wholehousefans/647/" class="child">HEPA Filtration Units</a></li> 

<li><a title="Air Exchangers" href="http://www.site.com/wholehousefans/648/" class="child">Air Exchangers</a></li> 

<li><a title="Energy Recovery Systems" href="http://www.site.com/wholehousefans/649/" class="child">Energy Recovery Systems</a></li> 

<li><a title="Attic Fans" href="http://www.site.com/wholehousefans/650/" class="child">Attic Fans</a></li> 

<li><a title="Accessories" href="http://www.site.com/wholehousefans/651/" class="child">Accessories</a></li> 

</ul> 

</li> 

</ul> 

</li> 

</ul><ul style="width: 19%"> 

<li><a title="Air Purifiers" href="http://www.site.com/airpurifiers/" class="topparent">Air Purifiers</a> 

<ul> 

<li><a title="Portable Air Purifiers" href="http://www.site.com/airpurifiers/607/" class="parent">Portable Air Purifiers</a></li> 

<li><a title="Whole House Air Purifiers" href="http://www.site.com/airpurifiers/608/" class="parent">Whole House Air Purifiers</a></li> 

<li><a title="Air Purifier Replacement Filters" href="http://www.site.com/airpurifiers/609/" class="parent">Replacement Filters</a></li> 

</ul> 

</li> 

</ul><ul style="width: 30%"><li><a href="http://www.site.com/humidifiers/" class="topparent">Humidifiers & Dehumidifiers</a> 

<ul> 

<li><a title="Portable Humidifiers" href="http://www.site.com/humidifiers/622/" class="parent">Portable Humidifiers</a></li> 

<li><a title="Room Humidifiers" href="http://www.site.com/humidifiers/623/" class="parent">Room Humidifiers</a></li> 

<li><a title="Whole House Humidifiers" href="http://www.site.com/humidifiers/624/" class="parent">Whole House Humidifiers</a></li> 

<li><a title="Energy Star Humidifiers" href="http://www.site.com/humidifiers/625/" class="parent">Energy Star Humidifiers</a></li> 

<li><a title="Humidifier Accessories" href="http://www.site.com/humidifiers/654/" class="parent">Humidifier Accessories</a></li> 

<li><a title="Portable Dehumidifiers" href="http://www.site.com/dehumidifiers/614/" class="parent">Portable Dehumidifiers</a></li> 

<li><a title="Room Dehumidifiers" href="http://www.site.com/dehumidifiers/615/" class="parent">Room Dehumidifiers</a></li> 

<li><a title="Basement Dehumidifiers" href="http://www.site.com/dehumidifiers/616/" class="parent">Basement Dehumidifiers</a></li> 

<li><a title="Whole House Dehumidifiers" href="http://www.site.com/dehumidifiers/617/" class="parent">Whole House Dehumidifiers</a></li> 

<li><a title="Crawl Space Dehumidifiers" href="http://www.site.com/dehumidifiers/618/" class="parent">Crawl Space Dehumidifiers</a></li> 

<li><a title="Energy Star Dehumidifiers" href="http://www.site.com/dehumidifiers/619/" class="parent">Energy Star Dehumidifiers</a></li> 

<li><a title="Dehimidifier Accessories" href="http://www.site.com/dehumidifiers/653/" class="parent">Dehumidifier Accessories</a></li> 

</ul> 

</li> 

</ul><ul style="width: 20.5%"> 

<li><a title="Vacuum Cleaners" href="http://www.site.com/vacuumcleaners/" class="topparent">Vacuum Cleaners</a> 

<ul> 

<li><a title="Central Vacuums" href="http://www.site.com/vacuumcleaners/632/" class="parent">Central Vacuums</a></li> 

<li><a title="Canister Vacuum Cleaners" href="http://www.site.com/vacuumcleaners/633/" class="parent">Canister Vacuum Cleaners</a></li> 

<li><a title="Upright Vacuum Cleaners" href="http://www.site.com/vacuumcleaners/634/" class="parent">Upright Vacuum Cleaners</a></li> 

<li><a title="Handheld/Cordless Vacuums" href="http://www.site.com/vacuumcleaners/635/" class="parent">Handheld/Cordless Vacuums</a></li> 

<li><a title="Vacuum Bags & Accessories" href="http://www.site.com/vacuumcleaners/636/" class="parent">Vacuum Bags & Accessories</a></li> 

</ul> 

</li> 

</ul></div><!-- end the menuh-container div --> 

</div><!-- end the menuh div -->

-------------------------------------------------------------

Thank you so much in advance for your help!
Fiona

Oct 1 '08 #1

Subscribe Post Reply

1388

Stang02GT

1,208

Expert 1GB

Please make sure in the future when you are posting code that you are using the [code] tags!

Oct 1 '08 #2

David Laakso

397

Expert 256MB

It is impossible know why it is to the right of the heading when the heading can't be seen.

Put the page in question on a public server and provide a clickable link to it in your post to the forum. Anyone can then view the markup and open the CSS file.

Oct 1 '08 #3

Similar topics

javascript toolbar-menu problem

by: JesusFreak | last post by:

From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host: 192.92.126.136 Recently, I downloaded the following...

Javascript

pop-up menu over frames

by: chubby | last post by:

I want a Fireworks popup menu to appear accross a frame boundary. Do I need to paste certain java script in all of the content html pages that appear in the main frame if the pop-up menu originates...

HTML / CSS

slide menu how to make it relative to table

by: ajay | last post by:

I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i...

HTML / CSS

Placement of menu in IE6

by: Jeroen Sangers | last post by:

Hello, I am having a problem in IE with my menu tabs. I want them to appear alligned on the bottom of my header, and therefore I have positioned my header relatively to set a positioning...

HTML / CSS

UL navigation menu, right aligned

by: Marek Mand | last post by:

How to create a functional *flexible* UL-menu list <div> <ul> <li><a href=""></li> <li><a href=""></li> <li><a href=""></li> </ul> </div> (working in IE, Mozilla1.6, Opera7 (or maybe even...

HTML / CSS

hover menu using <ul><li>

by: toylet | last post by:

Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse...

HTML / CSS

DHTML Menu change target frame

by: RWD | last post by:

I am trying to figure out how to change the target frame in my hyperlink on a DHTML menu. The menu is in one frame and the target frame is called "main" The code is below: Thanks in advance...

Javascript

How to determine a postion (for a menu in a centered table)

by: Ernst | last post by:

I have a script for a menu. However, this menu uses absolute coordinates. This menu had to be placed on a website. This website is position (centered) using a table. How can I determine/calculate...

Javascript

Cascading menu script

by: Anthony | last post by:

Below is a script I found at http://javascript.internet.com/ for a cascading menu. The script works great but there is one thing that I would like modified. BecauseI am just learning javascript,...

Javascript

Absolute Positioning Menu problems & Sides of page dissapear when minimized

by: worldwideebm | last post by:

This problem is hard to to explain. I have a web page with a container that has all of my content on it and then on the side of that container I have a small menu type of thing that I made which...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

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

General

Changing the language in Windows 10

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

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing