Styling Drop Down Menus for navigation bar

  • 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter davidsugalski

    (@davidsugalski)

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

    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="https://themediterraneancupboard.com/about/" title="About Us">About Us</a></li>
<li><a href="https://themediterraneancupboard.com/tastings/" title="Tastings">Tastings</a></li>
<li><a href="https://themediterraneancupboard.com/farmers/" title="Producers">Producers</a></li>
<li><a href="https://themediterraneancupboard.com/projects/" title="Resources">Resources</a>
<ul><li><a href="https://themediterraneancupboard.com/projects/recipes/" title="Recipes">Recipes</a></li>
</ul>
</li>
<li><a href="https://themediterraneancupboard.com/job-opportunities/" title="Job Opportunities">Job Opportunities</a></li>
<li><a href="https://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!

    Thread Starter davidsugalski

    (@davidsugalski)

    thank you my friend. i greatly appreciate this!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling Drop Down Menus for navigation bar’ is closed to new replies.