CSS Menu Positioning

fjohnson

New Member

Join Date: Mar 2008
Posts: 2

CSS Menu Positioning

Oct 1 '08, 05:16 PM

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

Code:

/* 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):
-----------------------------------------------

Code:

<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

Last edited by eWish; Oct 2 '08, 12:21 AM. Reason: Please use [code][/code] tags

Tags: None

Stang02GT

Recognized Expert Top Contributor

Join Date: Jun 2007

Posts: 1206
#2

Oct 1 '08, 06:38 PM

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

Recognized Expert Contributor

Join Date: Aug 2008

Posts: 397
#3

Oct 1 '08, 07:26 PM

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

Previous template Next

CSS Menu Positioning

CSS Menu Positioning

Comment

Comment