...

View Full Version : CSS newb-- drop-down help, please?



WiglyWorm
09-23-2006, 02:48 AM
I'm trying to create a drop down menu using CSS and a touch of java, so far it works pretty nicely, but there seems to be a few bugs I don't like. I simply don't know enough about CSS to track them down myself, so I'm hoping you guys can help. ^_^

It works well in IE (with a bit of java splashed in to change certain items to the ".over" class as you mouse over), the problems are as follows:

1a) The boxes and fonts appear to resize on me when you mouse over.
1b) The drop down portions are not lined up flush with the bottom of the nav bar, so they'll get drawn under the next main entry in the nav bar.
2) I'd like the nav menu to stretch over the entire div (684 pixels) with equal spacing, I can't seem to get that working.
3) The nav bar refuses to center itself. I've put it inside a div with "text-align: center;", I've even tried using the HTML <CENTER> tag in a fit of desperation.

Any help would be fantastic! Thank you. :)

Here is my CSS for the drop downs. If need be, I can probably upload my page somewhere so you can view the entire source.




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


#nav li li a {
display: block;
font-weight: normal;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.5em 0 0.5em 0;
border-width: 0 5px;
}

li {
float: left;
position: relative;
width: auto;
padding: 0.5em 1em;
text-align: center;
cursor: default;
background-image: url(images/Image8.jpg);
border: 1px solid #7d6340;
border-width: 1px 0;
}

li#first {
border-left-width: 1em;
}

li#last {
border-right-width: 1em;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background-image: url(images/Image8.jpg);
padding: 0.5em 0 0.5em 0;
border: 2px solid #7d6340;

}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

li:hover ul, li.over ul {
padding: 0.5em 0 0.5em 0;
display: block;
color: #FFF;
}


li a:visited {
color: #000;
}

li a:active {
color: red;
}

ul li a:hover {
text-decoration: underline;
display: block;
color: #fff;
background-color: #000;
}

1andyw
09-23-2006, 02:00 PM
WiglyWorm,

Have you seen this example:

http://www.htmldog.com/articles/suckerfish/dropdowns/

WiglyWorm
09-23-2006, 06:50 PM
I have, and that's actually what I'm going off of. I've managed to tweak it a fair ammount myself so far, but I think in my tweaking, I caused a few of these problems. The thing is I'm just not quite experienced enough to know where the issues are coming from.. so it's a matter of poke around for two hours or so to find everything. The big thing I don't understand is why my menu resizes itself when I highlight.

WiglyWorm
09-25-2006, 06:21 PM
Anyone?

Still having problems with this thing resizing when I highlight...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum