Re: CSS Menu Issue

[kendra69]

Thank you – I have changed the color so I can see the hover color now – I will go thru and fix the validator issues. My biggest question is how do I fix the menu bar issue with the color not extending or wrapping at the sides – I don’t want that different color at the end.

I would appreciate a quick response as I want to go live soon. Thanks so much for your help – this forum is great!

I have it on a new site now – http://www.4oakfantasyfootball.com/

The html:

Code:

• Home
• About
• NFL Players
• Rules
• Forum
• Contact Us
• Register

4OAK Fantasy Football

The game that blends fantasy football and poker.

© All rights reserved. KVR Company 2009

The css:

body {
position:relative;
margin: auto;
width:100%;
height:100%;
background-color: #986547;
background-image:url(images/football.jpg);
body text=”#FFFFFF”;
padding-top: 10px;
}

#container
{
width: 1000px;
line-height: 130%;
}

#wrap {
margin: 10px auto;
width: 1000px;
}

#top h1 {
background-image:url(images/test1.jpg);
background-repeat:no-repeat;
height: 225px;
clear: both;
}

#menu {padding:0 10px;
margin-top:-22px;
height: 40px;
line-height: 40px;
background: white url(images/menu.jpg) no-repeat;
}

#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
font-size: 0px;
}
#menu li a{
background-color:#986547;
color:yellow;
display:block;
font-size:17px;
line-height:40px;
padding:0 40px;
text-align:center;
text-decoration:none;
width:auto;
}

#menu ul {
padding:0;
}
#menu ul li ul li a {
color:yellow;
display:block;
font-size:15px;
line-height:40px;
padding-right:40px;
text-align:left;
text-decoration:none;
width:8em;
}

#menu li a:hover{
background-color: #8A4117;
}

#menu ul ul {
margin: 0; padding: 10;
top: 40px;
position: absolute;
visibility: hidden;
}
#menu ul li.forms ul li a {width: 240px;}
#menu ul li.parent resources ul li a {width: 240px;}

#menu ul li:hover ul{
visibility:visible;
}

#content {
background: #666666 url(images/content.jpg) repeat-y;
color: black;
padding: 50px;
}

#bottom {
background: #8A4117 url(images/bottom.jpg) no-repeat;
padding: 20px 0;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;}

.clear {
clear:both;
}