Cannot get dropdown menu working properly

HTML & CSS
1

Hello there,

I have my site here: www.slarc.com and I am trying to add two submenu links under “Firm Profile”. I cannot get it to work.

Right now I have added this code into the existing NavMenu:

                <ul id="NavMenu">
                    <li class="one" rel="#537D67"><a href="/">Home</a></li>
                    <li class="two" rel="#f2dd71"><a href="firmprofile">Firm Profile</a>
                    	<ul>
                        	<li class="sub"><a href="news">News & Announcements</a></li>
                            <li class="sub"><a href="casestudies">Case Studies</a></li>
                        </ul>
                    </li>
                    <li class="three" rel="#d18662"><a href="whysla">Why SLA?</a></li>
                    <li class="four" rel="#7383b7"><a href="portfolio">Portfolio</a></li>
                    <li class="five" rel="#537d67"><a href="humanfactors">Human Factors</a></li>
                    <li class="six" rel="#d18662"><a href="contact">Contact</a></li>
                 </ul>

However that just adds the “News & Announcements” link to the right of Firm Profile and doesnt’ show the second link to Case Studies. I’ve tried to add some code to my existing CSS menu to hide the visibility of #NavMenu ul ul. But isn’t working. Anyone know what I’m missing? I know it’s gotta be something simple.

Thanks,
Lorne

My CSS code for the menu:

/***    #NavMenu div for all pages.             ***/
#NavMenu h2             { clear:both; padding-top:20px; }
#NavMenu ul             { list-style:none; margin:0; padding:0; }
#NavMenu ul ul			{ visibility:hidden; }
#NavMenu ul li:hover ul	{ visibility:visible; }
#NavMenu li             { list-style:none; font-family:"Arial Narrow", Arial, sans-serif; font-size:15px; float:left; height:24px; text-align:center; overflow:hidden; border-left:solid #CCC 1px; text-transform:uppercase; margin:0; padding:0; }
#NavMenu li a           { display:block; width:auto; height:100%; color:#343C38; text-decoration:none; }
#NavMenu li a:hover,#NavMenu li a:focus,#NavMenu li a:active { color:#343C38; }
#NavMenu a              { background:url(Images/NavMenu/gradients.gif) no-repeat -127px 0; float:left; }
#NavMenu li,#NavMenu span,#NavMenu a { position:relative; float:left; padding-top:3px; }
#NavMenu span           { display:block; float:left; height:24px; background:url(Images/NavMenu/gradients.gif) no-repeat; }
#NavMenu .one           { border-left:0; }
#NavMenu .one a         { width:90px; }
#NavMenu .one span      { background-position:0 0; background-color:#B27253; }
#NavMenu .two a         { width:125px; }
#NavMenu .two span      { background-position:0 -24px; background-color:#325041; }
#NavMenu .three a       { width:100px; }
#NavMenu .three span    { background-position:0 -48px; background-color:#DDC067; }
#NavMenu .four a,#NavMenu .six a    { width:115px; }
#NavMenu .four span     { background-position:0 -72px; background-color:#B27253; }
#NavMenu .five a        { width:150px; }
#NavMenu .five span     { background-position:0 -96px; background-color:#63719f; }
#NavMenu .six span      { background-position:0 -120px; background-color:#325041; }
2

Hi,

Your submenu isn’t on the page you linked to but I did see an error with your selectors.
#NavMenu is on your <ul> tag so you need to remove the ul from your selectors.


#NavMenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
#NavMenu ul { visibility: hidden }
#NavMenu li:hover ul	{ visibility: visible }

#NavMenu ul ul { visibility: hidden }
That would hide ul’s within ul’s within the #NavMenu ul.

3

Hey Mark,

Thanks for the reply. You’re right I didn’t have the menu sublist uploaded because it screws up my menu.

However, I have uploaded the menu sublist items if you wouldn’t mind taking a look at it and see why the sublist won’t drop down? (www.slarc.com) I can work with the CSS after I get it working correctly.

Let me know what you think, thanks,
Lorne

4

Hi, I recommend you read up some articles on how to do dropdown menus. The inner <ul> holding the menu isn’t position:absolute nor should you even be hiding menus via visibility:hidden.

Also you need to make sure that if you are doing a vertical dropdown,m the inner <li>'s aren’t floated, because right now your rule of float:left; for the <li>'s are being applied to all of the dropdowns.

The dropdown is “becoming visible” but the thing is, it’s in the flow of the regular document so it just looks like a jumbled mess right now.

5

Thanks for the comments. I’m still working on it. However I already had my menu created and now I’m trying to add submenus. So trying to add this tutorial into the existing is what’s messing me up. This is where I foudn the tutorial to include visibility rules. http://css.flepstudio.org/en/css-tutorials/horizontal-drop-down-menu.html

I will keep playing with it, but any other suggestions would really help.

Thanks in advance,
Lorne

6

I’ve read some more articles and can’t quite seem to get my submenu to drop below the topmenu. Any suggestions? I had it at one point using firebug, but now can’t remember what I did. But even when I did get it to drop below, it was being cut off as if the div or topmenu wasn’t big enough to view what was below it.

Site is here: www.slarc.com (hover over firm profile to see the submenu items: News & Case Studies).

Suggestions?

Thanks,
Lorne