Question about navigation menus

[micha]

Is there a problem when you put a hover state to your main menu but when you try it on your browser nothing happens?
My home page is almost ready but for this little issue when i preview it on my browser i put the mouse over my menu and the
background color i set for the hover state doesn’t apply to it

you can chek it out here: http://www.urbanoarquitectonica.com/pre … ndex3.html

my css

Code:

body{
background-image:url(“../img/bg.jpg”);
background-color:#f7e9ce;
}

div#wrap{
margin: 20px auto;
width: 1000px;
position:relative;
}

/* HEADER */

div#header{
background-image:url(“../img/headerBG.png”);
height:146px;
overflow:hidden;
padding-bottom:10px;
position:relative;
z-index:10;
}

div#logo{
float:left;
height:80px;
margin: 20px 0 0 36px;
padding-bottom:15px;
width:279px;
}

/* header top menu*/

div#audio, ul#topMenu{
margin-top:12px;
}

div#audio{
position:absolute;
right:195px;
}

ul#topMenu{
position:absolute;
right: 0px;
margin-right:16px;
}

ul#topMenu li{
display:inline;
}

ul#topMenu a{
border-right:1px solid #000;
}

a#programacion{
padding-right:5px;
}

ul#topMenu a.ultimo, ul#bottomMenu a.ultimo{
border:none;
}

/* MENU */

div#bgBottom{
background-image: url(“../img/menuBottomBG.png”);
background-repeat:no-repeat;
padding-bottom: 30px;
position:relative;
top:-37px;
left: 391px;
width:619px;
z-index:200;
}

ul#menu{
position:relative;
top:-38px;
left:560px;
width:500px;
z-index:30;
overflow:hidden;
}

ul#menu li{
display:inline;
}

ul#menu a{
background-color:#ffcc00;
padding:3px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

ul#menu a:hover{
background-color:#f4d764;
}

/* CONTENIDO */

div#contentWrap{
background-color:#fffbe8;
position:relative;
}

div#curva{
position:relative;
}

div#curva img{
position:absolute;
top:-90px;
z-index:500;
}

div#slideShow{
position:relative;
z-index:200;
}

div#slides{
margin-top:-69px;
width:652px;
}

div#sidebar{
background-color: #fffbe8;
position:absolute;
top:2px;
width:352px;
left: 648px;
padding-bottom: 225px;
z-index:30;
}

div#col1{
background-image:url(“../img/col1BG.png”);
background-repeat:no-repeat;
background-color:#ffe28d;
height:79px;
margin-top:50px;
padding-top:10px;
width:347px;
}

div#col2{
background-image:url(“../img/col2BG.png”);
background-repeat:no-repeat;
height:79px;
width:344px;
}

div.bloques{
margin-left:5px;
position:relative;
top:208px;
padding-top:10px;
}

/* BOTTOM CONTENT */

div#bottomWrap{
overflow:hidden;
position:relative;
top:419px;
width:1000px;
position:relative;
z-index:60;
}

div#bottomContent{
background:url(“../img/bottomContent.png”) no-repeat;
height:115px;
width:1000px;
}

div.info{
float:left;
margin-top:65px;
}

div#tarjeta{
width:200px;
height:41px;
margin-left:25px;
position:relative;
top:-10px;
}

div#tarjeta p{ position:relative; top:-30px; left:80px; }

div#direccion{
width: 280px;
}

/* BOTTOM MENU */

ul#bottomMenu{
width:490px;
margin-left:0px;
}

ul#bottomMenu li{
display:inline;
}

ul#bottomMenu a{
border-right: 1px solid #000;
padding: 0 10px;
}

/* FOOTER */

div#footer{
background-image:url(“../img/footerbg.png”);
background-repeat:no-repeat;
background-color:#ffe28d;
overflow:hidden;
position:relative;
top:440px;
width:1000px;
-moz-border-radius:10px;
}

div.auspiciadores img{
margin: 5px 50px 0px 50px;
}

img#au2{
margin-left:190px;
}

img#au3{
margin-left: 190px;
}

any ideas? thanks in advance

raymi

[EamonnMac]

I’m not sure which menu list it is, but I’m assuming it’s the ul#menu. Instead of

Code:

ul#menu a{
background-color:#ffcc00;
padding:3px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

ul#menu a:hover{
background-color:#f4d764;
}

try

Code:

ul#menu li{
display:inline;
}

ul#menu li a{
background-color:#ffcc00;
padding:3px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

ul#menu li a:hover{
background-color:#f4d764;
}

…should work.

[Author]

Posts