Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css drop down help

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #25439
    vague
    Member

    Hi guys.

    First off I have to say that when it comes to css dropdown I am definitely not the sharpest tool in the shed, so I hope someone can push me in the right direction.

    Basically I’m just battling with the drop down bit. I’ve got the main nav the way I want it. All I really want for the drop down is a simple box with a darkish gray bg color and white text and light gray hover color with black text, with items sitting below each other. All the items must be the same length.

    If anyone can I would really appreciate it.

    Here is my code.

    Code:
    /*********************************************
    Horizontal Navigaion Styles
    *********************************************/
    #menu {
    color: #739b12;
    background: url(images/menu-bg.png) top left no-repeat;
    font-size: 16px;
    font-family: “Century Gothic”, Helvetica, Arial, Sans-Serif;
    text-align: left;
    text-transform: uppercase;
    padding: 21px 0px 0px 0px;
    margin: 0px;
    display: block;
    width: 100%; min-height: 21px;
    }
    #menu ul {
    background: url(images/menu-ul-bg.jpg) repeat-x;
    margin: 0px;
    padding: 2px 0px 0px 0px;
    height: 97px;
    display: block;
    }
    #menu ul li {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0px;
    padding: 29px 0px;
    }
    #menu ul li a {
    color: #739b12;
    padding: 31px 25px 32px;
    margin: 0px;
    text-decoration: none;
    border-right: 1px solid #B5B5B5;
    border-left: 1px solid #E0E0DF;
    }
    /* if you want to set a “current page item” style, do it here */
    #menu ul li.current_page_item a, #menu ul li.current_page_item a:visited {
    color: #739b12;
    text-decoration: none;
    background: #ccc url(images/menu-hover-active.jpg) repeat-x;
    font-weight: bold;
    }
    #menu ul li a:hover {
    color: #000;
    text-decoration: none;
    background: #739b12 url(images/menu-hover-active.jpg) repeat-x;
    }

    /* Style drop down list */

    #menu li ul {
    position: absolute;
    width: auto;
    left: -999em;
    }

    #menu li:hover ul, #nav li.sfhover ul {
    left:-999em;
    }

    #menu li ul li a {
    background: url(images/bg-nav.png);
    display: inline;
    line-height: auto;
    font-size: 11px;
    color: #666666;
    width: 150px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    }

    #menu li ul li a:hover {
    background: #666666;
    color:#FFF;
    }

    #menu li ul li a {
    }

    #menu li ul ul {
    margin: -35px 0 0 180px;
    }

    #menu li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
    }

    #menu li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
    left: auto;
    }

    /* IE7 Fix */

    #menu li:hover, #nav li.hover {
    position: static;
    }

    #60528
    dyrer
    Member
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.