# Solved: CSS Horizontal Drop down Menu



## Dougj (Sep 17, 2002)

I am attempting to use the CSS horizontal menu seen here

http://www.sperling.com/examples/menuh/

It is difficult to properly place on the page as it depends on screen resolution as to how it sits based on the positioning style. Also if I get it placed properly and then resize the browser the menu overlaps on itself and becomes cumbersome.

Is there a way to place the menu so it stays the same width as the rest of the content no matter what resolution or browser size?

Doug


----------



## cristobal03 (Aug 5, 2005)

Well, as far as the overlapping goes, you can use a fixed width for the container, or a min-width in the browsers that support it. I didn't actually look at the CSS, but if you want to be sure the menu's never collapsed, just apply a width to its DIV.

chris.


----------



## awatson (Jan 29, 2008)

As cris said - put the menu in its own fixed-width or min-width div, so that its containing element never gets narrow enough that it has to wrap.


----------



## Dougj (Sep 17, 2002)

so do you mean nav bar content here in the HTML or can I do that in the container within the CSS sheet?

Doug


----------



## tomdkat (May 6, 2006)

Dougj said:


> so do you mean nav bar content here in the HTML or can I do that in the container within the CSS sheet?


Yep, that's the jist of it. In either case, you'll need to put a DIV in the HTML page. You can put the stying of the DIV in the HTML page or in a CSS stylesheet.

Peace...


----------



## Dougj (Sep 17, 2002)

Ok that sort of worked. I changed the style sheet ID=menu-container that was placing the menu position:absolute to position:static and set width:740px to match my other table widths. The menu now maintains its width when the browser is resized.

However in normal browser size the menu bar sits to the left of my other tables, so I put it in a table with a around the table, as I ususally do to my tables to position them in the page center. This works great to position the menu...BUT... my sub menus now try to position themselves to page center instead of under the parent menu item as they have before.

So, is there a way to either set the menu in the centered table and then override the center option for the submenus, OR not use the around the menu bar but still have it sit in the middle of the page where my other content sits?

D.


----------



## Dougj (Sep 17, 2002)

yo can go here to see the page code

http://www.cusegama.ca/test.html

and here is the menu style sheet:

/* Begin CSS Drop Down Menu */

#menuh-container /* positions menu on page */
{
position: static; /* forces menu to be placed where i programmed it in code */
width: 740px; /* forces menu bar to fixed width so it will not overlap on itself when browser is resized */
}

#menuh
{
font-size: small;
font-family: tahoma, arial, sans-serif;
width:100%;
float:left;
margin:0em;
margin-top: 0em;
}

#menuh a
{
text-align: center;
display:block;
border: 0px solid #000;
white-space:nowrap;
margin:0;
padding: 0.15em; /* sets nav bar height */
}

#menuh a, #menuh a:visited	/* menu at rest */
{
color: white;
background-color: #ab1113;
text-decoration:none;
}

#menuh a:hover	/* menu at mouse-over */
{
color: white;
background-color: cornflowerblue;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url("../images/navdown_white.gif");
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url("../images/nav_white.gif");
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:13.9em;	/* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

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

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */


----------



## tomdkat (May 6, 2006)

Dougj said:


> However in normal browser size the menu bar sits to the left of my other tables, so I put it in a table with a around the table, as I ususally do to my tables to position them in the page center. This works great to position the menu...BUT... my sub menus now try to position themselves to page center instead of under the parent menu item as they have before.
> 
> So, is there a way to either set the menu in the centered table and then override the center option for the submenus, OR not use the around the menu bar but still have it sit in the middle of the page where my other content sits?


Which browser and browser version are you testing with? Attached is what I see in Firefox 3 beta 3 on Windows XP. The drop-down menu seems to be behaving correctly.

Peace...


----------



## Dougj (Sep 17, 2002)

I am testing in IE 6 & 7

d.


----------



## Dougj (Sep 17, 2002)

I got it fixed. just removed the from around the table and put the palign="center" within the table and all seesm OK in both IE and firefox. Thanks for the help

doug


----------

