Grow your CSS skills. Land your dream job.

Question about navigation menus

  • # July 9, 2009 at 2:13 pm

    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

    # July 9, 2009 at 7:01 pm

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".