hey,

 

I'm working on a css only mega drop down, but when I hover over one of the drop downs a horizontal scroll bar appears. Does anyone know why or how to solve it?

 

Many thanks in advance!

 

link (it's the visa drop down)

 

#navigation {

width: 980px;

height: 35px;

margin: 0 auto;

background: url(../images/container-bg.png) repeat-x;

position: relative;

border: solid 1px #ddd;

font-family: arial;

}

 

#navigation ul {

position: relative;

width: 982px;

margin: 0 auto;

left: 0px;

top: 0px;

list-style: none;

}

 

#navigation li {

float: left;

position: relative;

top: 0px;

display: block;

}

 

#navigation li a {

color: #666;

height: 28px;

padding: 8px 25px 0 25px;

font-size: 0.8em;

text-decoration: none;

position: relative;

border-right: solid 1px #ddd;

top: 0px;

font-weight: bold;

display: block;

}

 

#navigation a:hover {

color: #000;

}

 

#navigation .drop {

background: url(../images/menu-bullet2.png) no-repeat right 15px;

}

 

#navigation .drop:hover {

background: url(../images/menu-bullet.png) no-repeat right 15px;

}

 

.dropdown-1column,

.dropdown-2columns,

.dropdown-3columns,

.dropdown-4columns,

.dropdown-5columns {

margin: 0 auto;

position: absolute;

left: -999em; /* Hides the drop down */

text-align: left;

padding: 5px;

border: 1px solid #bbb;

border-top: none;

 

/* Gradient background */

background: #F4F4F4;

background: -moz-linear-gradient(top, #fafafa, #ddd);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#ddd));

 

/* 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; height: 75px;}

.dropdown-2columns {width: 280px;}

.dropdown-3columns {width: 420px;}

.dropdown-4columns {width: 640px; height: 180px;}

.dropdown-5columns {width: 700px;}

 

#navigation li:hover .dropdown-1column, /*makes drop down appear when hovering*/

#navigation li:hover .dropdown-2columns,

#navigation li:hover .dropdown-3columns,

#navigation li:hover .dropdown-4columns,

#navigation li:hover .dropdown-5columns {

position: absolute;

z-index: 500;

left: -1px;

top:auto;

}

 

.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:150px;}

.col-2 {width:270px;}

.col-3 {width:410px;}

.col-4 {width:550px;}

.col-5 {width:690px;}

 

#navigation p, #navigation h3, #navigation ul li {

font-size: 0.7em;

text-align: left;

text-shadow: 1px 1px 1px #FFFFFF;

}

#navigation div h2{

font-size: 0.85em;

font-weight: bold;

color: #333;

font-weight: 0;

margin: 10px 0;

padding: 0;

border-bottom: 1px solid #ccc;

font-family: arial;

text-shadow: 1px 1px 1px #ffffff;

}

 

#navigation h2:hover{

color: #029feb;

}

 

#navigation p {

line-height: 18px;

margin: 0 0 10px 0;

}

 

#navigation li:hover div a {

color: #666;

font-size: 1em;

font-weight: normal;

border: none;

margin: 0;

padding: 0;

display: block;

height: 25px;

}

 

#navigation li:hover div a:hover {

color: #0073FF;

}

 

#navigation li ul {

list-style: none;

padding: 0;

margin: 10px 0;

}

 

#navigation li ul li {

position: relative;

line-height: 1.3em;

text-shadow: 1px 1px 1px #ffffff;

padding: 0;

margin: 0;

float: none;

text-align: left;

width: 150px;

}

 

#navigation li ul li:hover {

background: none;

border: none;

padding: 0;

margin: 0;

}

Edited July 18, 201115 yr by robsticles

I would set positions to absolute this will stop your menu from overflowing. Your dropdown should be displayed online and your drop down UL should have a fixed width.

thanks, there is a link but in case you didn't see it here it is again creatingwebdesigns.com/test

 

the containing div does have specific dimensions: .dropdown-4columns {width: 640px; height: 180px;}

and so do the divs containing the ul's: .col-1 {width:150px;}

 

and the drop down div has absolute positioning:

#navigation li:hover .dropdown-4columns {

position: absolute;

z-index: 500;

left: -1px;

top:auto;

}

 

so still not sure where I've gone wrong?

Edited July 18, 201115 yr by robsticles

problem solved by adding: overflow: hidden - to the drop down div

 

not sure if that's the right approach but it works!