Question

I am new to css and I am working on a menu bar for a website and I know what the problem is just don’t know how to fix it.

The nav bar is designed to hide the element Left -9999 off the screen until a hover occurs then it sets the left to a -0. However, one of my tabs “Links” has a 5 column body that is going off the screen to the right. I need a way to move that left:-387px. I can’t do style=”left:-387;” directly on the div because then it doesn’t hide the menu when not in use. Could someone please help me on a solution to fix this menu item?

I would normally post the script here or use jsfiddle but to much code for either. However you can find the site here:

http://gdisinc.com/barker/default.php

Here is the one of the issues with it:

.dropdown_1column {width: 175px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {

   /* I need this to be -387 but if I change this it will mess up all menus. */
   left:-1px; 
   top:auto;
}

Here is where we hide the menu items

.dropdown_5columns {

/* This places the body of the menu item right below the menu bar. */
margin-top: 12px;

/*Containers with different sizes will hold the entire drop down content. I've chosen the tag names according to the number of columns they will contain. To hide the drop downs, we'll use absolute positioning with a negative left margin: */

float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;

border:1px solid #777777;
border-top:none;

/* Gradient background
The background fallback color is the same as the one used for the menu items. Modern browsers will display a gradient starting with #EEEEEE at the top (to match the parent menu item gradient) and ending with #BBBBBB at the bottom: */
background: #F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners 
We'll again use rounded corners, except for the top left one: */
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
 }

Here is where I got the tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

I am pretty sure the fix is to create a separate class for just the “Links” link but I don’t know how to do that.

Answer 1

Leave your left property to 0 and use display block instead

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {

   /* all menus are display:none by default */
   display:block;
}