Forums

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

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

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

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.

treehouse : what would you like to learn today?

Forums

Question about navigation menus