A CSS Question

[jrutherchevy]

Hi folks,

If anyone is CSS-savvy, your help would be mucho appreciated!

I used a tutorial on another site to create a horizontal drop-down menu, entirely in CSS. It's beautiful, exactly what I want, but there's a slight problem. Whenever I preview the page (in any browser) and hover over the button to activate the sub-menu, the sub-menus push all of the content that's below it all round, making the content flow around the extended sub-menu. I've tried fixing the z-index, visibility, and tweaked with numerous other settings, but it's still a no-go. I've emailed the author of the tut, but it's been a while, and he hasn't gotten back to me.

Any ideas???

[Scott]

Hard to say without seeing code.

I, myself, try to avoid z-index attributes. They are generally VERY browser specific.

are your menu items all contained in one div tag?

[graphixgeek]

Yeah...I'd have to see the code...that's why I design in flash...or use dreamweaver...less motrin consumption...

[jrutherchevy]

The menu I used was written so that each 'button' and it's corresponding drop down was contained in it's own container, and then used classes instead of id's. I was able to work around the problem by setting a position: absolute value to the menu, and that seems to be working. Let me clean it up a little, and I can still post the code.

Long post warning!!

body {

margin: 0px;

padding: 0px;

background-color: #000000;

background-image: url(wheelbg.png);

background-repeat: repeat;

color:#fff;

}



#header {

height: 220px;

width: 900px;

margin: 0px auto;

padding: 0px;

background: url(sotwbanner2.png) no-repeat top center;

border: 1px solid #000;

}



#globalnav {

height: auto;

width: 900px;

margin: 0px auto;

margin-left: 55px;

padding: 0px;

overflow: hidden;

position: absolute;

}

.menu {

display:none;

}

.container {

color:#ccc;

width:87px;

height:18px;

display: block;

background:#990000;

border:1px solid #000;

margin:0px;

margin-right: 1px;

text-align:center;

float:left;

text-decoration:none;

font-family: Georgia, "Times New Roman", Times, serif;

font-size:10px;

line-height:18px;

overflow: hidden;

}

.container:hover {

height:auto;

display: block;

cursor: pointer;

color:#fff;

background:#000;

}

a.inside, a.inner:visited {

display:block;

width:89px;

height:18px;

border-bottom:1px solid #000;

text-decoration:none;

color:#fff;

background:#990000;

}

a.inside:hover {

color: #000;

background:#ccc;

}



#pagecontainer {

clear: both;

height: 100%;

width: 885px;

margin: 0px auto;

padding: 20px 0px 20px 14px;

background-color: clear;

border: 1px solid #000;

}



#text {

height: 100%;

width: 40%;

margin: 15px 10px 15px 0px;

padding: 15px;

background-color: #999999;

border: 1px solid #000000;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 12px;

color: #000;

float: left;

display: block;

}



#news {

height: 100%;

width: 30%;

margin: 15px 10px 0px 0px;

padding: 15px;

background-color: #999999;

border: 1px solid #000000;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 12px;

color: #000;

float: left;

display: block;

}



#affiliates {

height: 100%;

width: 15%;

margin: 15px 10px 0px 0px;

padding: 15px;

background-color: #999999;

border: 1px solid #000000;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 10px;

color: #000;

float: left;

display: block;

text-align: center;



}



#footer {

clear: both;

height: auto;

width: 900px;

margin: 0px auto;

margin-top: 10px;

padding: 0px;

background-color: #666666;

border: 1px solid #000000;

font-size: 9px;

text-align: center;

line-height: .01em;

color: #000000;

}

[graphixgeek]

looks like you found the prob...that's what I would've changed...