Grow your CSS skills. Land your dream job.

wordpress nav help

  • # May 25, 2012 at 8:35 am

    I’m having trouble with my main navigation drop down links. When I hover over a link, say fads I can’t click on the ones below, they dissapear to fast before I can click on it. Why is this happening and how can I fix it? is it happening to others?

    here’s the link site link

    # May 25, 2012 at 12:23 pm

    Try this…


    #header_nav {
    width:900px;
    clear:left;
    }

    #nav_main {
    list-style:none;
    height:40px;
    width:100%;
    margin:0 auto;
    text-transform: capitalize;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    }

    #nav_main li {
    position:relative;
    float:left;
    width:100px;
    background:#694c8f;
    text-align:center;
    border-right:1px solid #9070b9;
    border-left:1px solid #9070b9;
    }

    #nav_main a:hover {
    background-color:#7e5ea7;
    }

    #nav_main a {
    display:block;
    color:#ffffff;
    font-weight:bold;
    text-decoration:none;
    line-height:40px;
    }

    #nav_main a b {
    position:absolute;
    bottom:-1px;right:0;
    border-left:12px dashed transparent;
    border-bottom:12px solid #333333;
    }

    /*
    Drop Down
    */
    .sub-menu {
    list-style:none;
    border:0px solid #333333;
    width:385px;
    margin:0 auto;
    text-transform: capitalize;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    }

    #nav_main ul {
    display:none;
    list-style:none;
    }

    #nav_main ul li a {
    padding-left:10px;
    padding-right:10px;
    }

    #nav_main ul li {
    border-right:1px solid #9070b9;
    border-left:1px solid #9070b9;
    width:auto;
    }

    #nav_main li:hover ul {
    position:relative;
    left:-41px;
    top:auto;
    display:block;
    }
    # May 25, 2012 at 12:26 pm

    yes thanks, :D I forgot to add position: relative to my hover and that’s what was causing the problem.

    Thanks for the help

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

You must be logged in to reply to this topic.

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