Dropdpwn menu pushing menu items to left

[laflair13]

I know I am missing something small but I cannot find it. When I hover over a menu item, the dropdown is causing the top menu to push to the right. I am trying to put a MegaMenu on the site.

html

 <ul id="menu"> 
     <li><a href="#" class="drop">Home</a></li><!-- End Home Item -->
     <li><a href="#" class="drop">Web Design</a><!-- Begin 4 columns Item -->
     <div class="dropdown_4columns"><!-- Begin 4 columns container -->
          <div class="col_1">
             <ul>
                    <li class="container">
                    <img src="img/web-1.png" width="325" height="70" class="img_left imgshadow" alt="" id="pic1"/>
                    <img src="img/web-2.png" width="325" height="70" class="img_left imgshadow" alt="" id="pic2"/>
                    </li>
                    <li class="container">
                    <img src="img/web-1.png" width="325" height="70" class="img_left imgshadow" alt="" id="pic1"/>
                    <img src="img/web-2.png" width="325" height="70" class="img_left imgshadow" alt="" id="pic2"/>
                    </li>
                    <li class="container">
                    <img src="img/web-1.png" width="325" height="70" class="img_left imgshadow" alt="" id="pic1"/>
                    <img src="img/web-2.png" width="325" height="70" class="img_left imgshadow" alt="" id="pic2"/>
                    </li>
              </ul>   
           </div>
         </div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
        <li><a href="#" class="drop">Home</a></li><!-- End Home Item -->

    <li><a href="#" class="drop">Home</a></li><!-- End Home Item -->

    <li><a href="#" class="drop">Home</a></li><!-- End Home Item -->
</ul>

css

#menu {
    list-style:none;
    width:600px;
    height:43px;
    padding:0px 5px 0px 5px;
    float: right;
    margin-top: 75px;
 
    /* Rounded Corners */
     
   
}
 
#menu li {
    float:left;
    position:relative;
    margin-top:7px;
    padding-right: 50px;
    border:none;
}
 
#menu li:hover {
     
  
}
 
#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #000000;
    display:block;
    outline:0;
    text-decoration:none;
  
}
 
#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
    padding-right:5px;
    background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("img/drop.png") no-repeat right 7px;
}
 
/* Drop Down */
 
.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:relative;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
     
    /* Gradient background */
    background:#F89926 none repeat scroll 0%;
  
    box-shadow: 0px 20px 30px #945B17 inset;
    text-shadow: 0px 1px 1px #4F3C25;
 
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}
 
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 350px;}
.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 {
    left:-1px;
    top:auto;
}
 
/* Columns */
 
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:350px;}
.col_5 {width:690px;}
 
/* Right alignment */
 
#menu .menu_right {
    float:right;
    margin-right:0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

[laflair13]

Well I was able to get the position fixed with adding absolute, but now I cant get it moved under the top menu item. I want the dropdown center of the top menu item.

[PaulOB]

Hi,

I’m not sure where you want the menu as it is usual to place it at the left of the item that triggers it (which is what you have).

#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 {
	left:-1px;
	top:auto;
}

If you want it somewhere else then you would need to change the left:-1px to something more appropriate.

If you want the menu flush at the left of the whole menu then remove position:@relative from #menu li and apply position:relative to the parent ul instead (#menu).

You also need to remove the defaults from the nested ul.

   #menu ul{margin:0;padding:0;list-style:none}