WordPress.org

Ready to get started?Download WordPress

Forums

Styling Drop Down Menus for navigation bar (4 posts)

  1. davidsugalski
    Member
    Posted 7 years ago #

    So, I've researched wordpress and I found suckerfish and many posts leading to it. I've spent multiple hours today trying to get dropdown bars to work, but i could never get it quite right. I'm wondering if someone would mind taking a look at my code to see if they have any idea what to do. Thanks! Site is here.

    Recipes is a subpage of resources for an example. I am trying to drop down the subpages from their parents in the horizontal navbar upon hovering.

  2. davidsugalski
    Member
    Posted 7 years ago #

    not sure if this was supposed to be posted in hacks. anyone have any idea about this problem?

  3. csleh
    Member
    Posted 7 years ago #

    You are going to need to edit the styles to match your current, but this works. ALTHOUGH it might not in ie5 or ie6 -- so test it to be sure.
    for the css file:

    #navigation ul {
    margin:0;
    padding:0;
    list-style:none;
    font-size:1em;
    float:left;
    }
    #navigation ul li {
    position:relative;
    display:block;
    float:left;
    width:12.18em;
    height:2em;
    }
    #navigation ul li a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 5px 0 2px;
    font-weight:bold;
    text-align:center;
    }
    #navigation li ul {
    position: absolute;
    left: 0;
    top: 2.1em;
    display: none;
    }
    #navigation ul li ul li {
    height:1.6em;
    }
    /* lists nested under hovered list items */
    #navigation li:hover ul {
    left: 1px;
    margin-left: -1px;
    display: block;
    }
    #navigation ul li ul li a  { /*change dropdown items */
    color:#000;
    font-weight:normal;
    width:100%;
    }
    #navigation ul li ul li a:hover { /*hover to gray background */
    background-color:#f0f0f0;
    }

    and the html:

    <div id="navigation">
     <ul id="nav">
    <li class="current_page_item"><a href="http://themediterraneancupboard.com/about/" title="About Us">About Us</a></li>
    <li><a href="http://themediterraneancupboard.com/tastings/" title="Tastings">Tastings</a></li>
    <li><a href="http://themediterraneancupboard.com/farmers/" title="Producers">Producers</a></li>
    <li><a href="http://themediterraneancupboard.com/projects/" title="Resources">Resources</a>
    <ul><li><a href="http://themediterraneancupboard.com/projects/recipes/" title="Recipes">Recipes</a></li>
    </ul>
    </li>
    <li><a href="http://themediterraneancupboard.com/job-opportunities/" title="Job Opportunities">Job Opportunities</a></li>
    <li><a href="http://themediterraneancupboard.com/" title="Home">Blog</a></li>
      </ul>
    </div>

    There were problems with the html not set up properly (an li element out of place enclosing the entire set) but mostly in the css. The drop down bit needs be defined separately, hidden then shown.
    Hope this works for you!

  4. davidsugalski
    Member
    Posted 7 years ago #

    thank you my friend. i greatly appreciate this!

Topic Closed

This topic has been closed to new replies.

About this Topic