WiglyWorm
09-23-2006, 01: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;
}
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;
}