SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Problems with drop down menu

    http://rafflebananza.com/admin/test.html

    I am trying to create multiple lists under the 'Browse Raffles' option of my drop down menu.

    top-sellers-menu.jpg

    The image above is somewhat I'm looking to create.

    Best Regards,
    Tim

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Quick assessment:

    try removing the INLINE CSS of the child ULs, they are set to "display:none;". Since inline CSS generally overrides any stylesheet, your rule won't apply. Tho actually you can add display:block ! important; to your :hover rules, but that is messy.

    ALSO, I noticed you have overflow:hidden; on your #topNavList, probably used to contain your floats, but this also has a the unfortunate side effects of hiding your drop downs as well.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    try removing the INLINE CSS of the child ULs,
    This means the likes of <div style="height:20px;">? I don't appear to have any?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    INLINE CSS is anywhere you have used "style='" on the mark up.

    for example, that DIV tag will be 20px regardless of what you used in your style sheet ( unless the style sheet rule has "! important" .. but that usually also leaves you painted in to a corner)

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    INLINE CSS is anywhere you have used "style='" on the mark up.

    for example, that DIV tag will be 20px regardless of what you used in your style sheet ( unless the style sheet rule has "! important" .. but that usually also leaves you painted in to a corner)
    I have none of these in my code

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,364
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    I believe the inline styles are being generated by the JavaScript:

    Code:
    if (ab > 979) {
    			$('#TopNavList').css('display', 'block');
    			$('#TopNavigation .DropDownWrap').removeClass("active");
    		} else {
    			$('#TopNavList').css('display', 'none');
    			$('#TopNavigation .DropDownWrap').removeClass("active");
    		}

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I believe the inline styles are being generated by the JavaScript:

    Code:
    if (ab > 979) {
    			$('#TopNavList').css('display', 'block');
    			$('#TopNavigation .DropDownWrap').removeClass("active");
    		} else {
    			$('#TopNavList').css('display', 'none');
    			$('#TopNavigation .DropDownWrap').removeClass("active");
    		}
    How would you say to work around this as when you remove, if you change the width to see the other menu, open then close, then resize, the menu does not show which is a problem for mobile devices.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What was the question again

    If you want multiple lists (mega -style) then you are looking for a mega-menu approach and you would need to have multiple uls in the drop down portion which are usually enclosed in a div parent or list parent. You show the div parent when required and then the uls can be floated next to each other to give the column effect.

    This is a very very old demo (made for IE6) but shows how to have multiple columns.


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
  •