SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Dropdown Menu Not showing!!!

    Ok having some issues.

    I've used this code several times for Dropdowns and now the childs are not showing for some reason, I must have did something different but can't find out what. Here is the site...

    http://safety1consulting.com/2013/

    If someone can see what I did wrong this time that would be great I've been pounding my head trying to see where went wrong this time.

    Thanks,

    Mike

  2. #2
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Still banging my head on my desk with this, can't see whats wrong with it from others I've done lol

  3. #3
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Try this code in css:
    Code:
    .ssf-blue-wrap ul li:hover ul {
      display: block;
      visibility: visible;
    }
    - The ideea is to make the UL child visible when the LI parent is hover, like in the code above.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nope, that didnt work I've never had to add that to any dropdowns in the past. Thanks though, hopefully can solve it shortly spending too much time trying to figure out why lol

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If a drop down menu doesn't show then there are usually 2 main reasons.

    1) The menu is going behind something

    2) The parent div is set to overflow:hidden so nothing can show outside the menu.

    In your case you have overflow:hidden on .row which holds the menu and therefore the dropdown menu will never show because it overflows the container. For the element called .row that holds the menu you will need to use another clearing mechanism instead of overflow:hidden. Use the clearfix method instead.

  6. #6
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    I'm not too familiar with clearfix as never ran into this problem with using the dropdown this way so its weird that just hit this issue now cause I've always used this way in the past with the overflow: hidden on the row class. What exactly would I need to do.

    Thanks,

    Mike

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Add another class here to the .row that holds the nav:

    Code:
    <div class="row rownav">
    		<div class="twocol">
    Then use this css:

    Code:
    .rownav{
    overflow:visible;
    zoom:1.0;
    }
    
    .rownav:after{
    content:" ";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
    }

    You can't use overflow:hidden to clear floats when you have elements that need to poke out of the parent div - such as your dropdown menu. You can get away with it if you have more content in that same div under the menu so that the div is taller than the dropdown but in this case the row is only as tall as the nav top level do the overflow will be cut off

  8. #8
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you could use AllWebMenus in order to avoid things like that. You just create your structure, you set the styles you want and you link it to your pages.
    Last edited by TechnoBear; May 15, 2013 at 04:29. Reason: Unnecessary link removed

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JefNer View Post
    Or you could use AllWebMenus in order to avoid things like that. You just create your structure, you set the styles you want and you link it to your pages.
    Why would someone trade a lightweight accessible menu for an inaccessible heavyweight menu that uses tables for layout and is fully reliant on javascript to work?


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
  •