Jumpy css3 drop down menu

[bluesnbooze]

Hey everyone…I am working on a site for a business and I made them a nifty little css3 drop down menu. The site can be seen at http://www.whshealth.net (yes, its still mostly under construction lol) – Anyways, I am noticing that my hover over menu items are jumping on me. I am positive it is some small line of code that I am overlooking (using Dreamweaver doesnt help much either) but was wondering if someone could tell me if they spot the issue. Heres my code and thanks for any help!

#menu {

list-style: none;

width: 880px;

margin: 0 auto;

height: 45px;

padding: 5px 30px;

/* rounded corners for different browser support */



border-radius: 0px 0px 5px 5px;

-moz-border-radius: 0px 0px 5px 5px;

-webkit-border-radius: 0px 0px 5px 5px;

/* css3 gradient */

background: #333333;

background: #ffd351;

/* css3 borders */



border: none;

box-shadow: inset 0px 0px 0px #e8edf0;

-moz-box-shadow: inset 0px 0px 0px #e8edf0;

-webkit-box-shadow: inset 0px 0px 0px #e8edf0;

}

/* tab starts here */



#menu li {

float: left;

display: block;

position: relative;

text-align: center;

padding: 4px 10px;

margin: 7px 30px 0 0;

border: solid 1px transparent;

font-weight: bold;

}

#menu li:hover {

border: solid 1px #666666;

/*rounded corners  */



border-radius: 5px 5px 0px 0px;

-moz-border-radius: 5px 5px 0px 0px;

-webkit-border-radius: 5px 5px 0px 0px;

/* css 3 gradient */

background: #fff;

background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;

background: #ffffdf;

}

#menu li.homebutton:hover {

border: solid 1px #ffd351;

/*rounded corners  */



border-radius: 5px 5px 5px 5px;

-moz-border-radius: 5px 5px 5px 5px;

-webkit-border-radius: 5px 5px 5px 5px;

/* css 3 gradient */

background: #fff;

background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;

background: #ffffdf;

}

#menu li a {

font-size: 14px;

color: #333333;

display: block;

outline: 0;

text-decoration: none;

border: none;

}

#menu li:hover a {

color: #161616;

font-weight: bold;

}

/* menu containers here  */



#menu .menu-container-1,#menu .menu-container-2,#menu .menu-container-3,#menu .menu-container-4,#menu

.menu-container-5  {

margin: 4px auto;

float: left;

position: absolute;

left: -999em;

text-align: left;

padding: 5px 5px;

border: solid 1px #000000;

/* rounded corners */



border-radius: 0px 5px 5px 5px;

-moz-border-radius: 0 5px 5px 5px;

-webkit-border-radius: 0 5px 5px 5px;

/* gradient */

background: #444444;

background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;

background: #ffffdf;

}

#menu .menu-container-1 {

width:140px;

}

#menu .menu-container-2 {

width: 285px;

}

#menu .menu-container-3 {

width: 145px;

}

#menu .menu-container-4 {

width:560px;

}

#menu .menu-container-5 {

width:350px;

}

#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4

#menu li:hover .menu-container-5

{

top: auto;

left: -1px;

bottom: auto;

}

/* columns ici */



#menu .column-1, #menu .column-2 {

display: inline;

float: left;

position: relative;

margin: 0 5px;

}

#menu .column-1 {

width: 131px;

}

#menu .column-2 {

width:260px;

}

#menu .column-3 {

width:390px;

}

#menu .column-4 {

width: 131px;

}

/* right menu */



#menu .menu-right {

float:right;

margin-right:0px;

}

#menu li .align-right {

/*rounded corners */



border-radius:5px 0 5px 5px;

-moz-border-radius:5px 0 5px 5px;

-webkit-border-radius:5px 0 5px 5px;

}

#menu li:hover .align-right {

left: auto;

right: -1px;

top: auto;

bottom: auto;

}

/* menu h2, h3, p, etc.... */



#menu p, #menu h2, #menu h3, #menu ul li {

line-height:21px;

font-size:12px;

text-align:left;

}

#menu p {

line-height:18px;

margin-bottom:10px;

color:#F2E8E8;

}

#menu h3, #menu h2 {

font-size: 11px;

margin: 7px 0 10px 0;

padding-bottom: 0px;

text-transform: uppercase;

color: #000000;

}

#menu li:hover div a {

box-shadow: none;

color: #000000;

font-size: 9px;

padding-left: 6px;

border: none;

}

#menu li:hover div a:hover {

background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;

background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));

color: #000000;

background: #FFD351;

border: solid 1px #ffd351;

}

#menu li ul {

box-shadow: none;

list-style: none;

padding: 0;

margin-bottom: 12px;

}

#menu li ul li {

float: none;

font-size: 12px;

line-height: 24px;

margin: 0;

padding: 0;

position: relative;

text-align: left;

width: 130px;

}

#menu li ul li:hover {

background: none;

border: none;

margin: 0;

padding: 0;

[Paulie_D]

It’s difficult to tell but my guess is that it’s that odd -1px shift you have in your CSS.

[bluesnbooze]

I actually thought that originally, but changing that doesnt appear to do anything for me. I went back through my code last night and I am completely stumped.

[bluesnbooze]

That actually positions the column so that it is even with the div tag of the link above it…Makes so the border line is even

[Paulie_D]

In that case it might be the border you are adding on hover.

[Paulie_D]

@kgscott284 Link doesn’t work

[Author]

Posts