SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot get dropdown menu working properly.

    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:

    HTML Code:
                    <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:
    Code:
    /***    #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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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.
    Code css:
    #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. #3
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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-tut...down-menu.html

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

    Thanks in advance,
    Lorne

  6. #6
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •