SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    drop downs not working

    hi,
    i am working on a menu and the 2nd menu's 2nd row is child of the first menu but its not showing as a drop down. but as seen on the website. wht can be wrong? i checked in menu. its child of other page
    All those who wander aren't lost.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    w/o going into the code specifically, I'd say you aren't giving the LI ULs position:absolute; AND you aren't hiding them ( I like to position mine off screen as it's more accessible, but some an older method was to give the element display:none; )
    So essentially you need to have something similar to the following in your CSS:



    #nav >li {position:relative; }
    #nav li ul {position:absolute; left:-9999em; top:100%}
    #nav li:hover ul {position:absolute; left:auto;}

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wasn't that is by defult behaviour of wordpress child menu when place under parents?
    All those who wander aren't lost.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    There is no default behavior in WP. It all depends on which theme you are using,as well as how you chose to alter said theme. Remember CSS cascades, and overrides. The 2010 theme, for example, as a working VERTICAL drop down MAIN menu in it. but if you dont use 2010 or chose to alter it then all bets are off.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    So essentially you need to have something similar to the following in your CSS:


    Code:
    #nav >li {position:relative; }
    #nav li ul {position:absolute;  left:-9999em;  top:100%}
    #nav li:hover ul {position:absolute;  left:auto;}
    Hi dresden,

    If I remember correctly using left:auto has the potential to cause problems with IE7 as it has to guess where to place the sub ul. The problem usually occurs when text-align:center is used on the parent ul/li. Then IE7 will center the left edge of the sub ul in it's attempt to guess what left:auto is.

    I've always had much better results using a negative margin for x-browser code.
    Code:
    #nav li {
        position:relative;/* set containing block for AP sub ul */
    }
    #nav li ul {
        position:absolute;
        left:0;
        top:100%;
        margin-left:-999em;/* hide the sub ul */
    }
    #nav li:hover ul {
        margin-left:0;/* reveal the sub ul on li:hover */
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As others have said you will need something roughly like this.
    Code:
    #menu-main-menu-2{position:relative;}
    #menu-main-menu-2 li{
    background-position:0 12px;
    position:relative!important;
    }
    
    #menu-main-menu-2 ul{
    position:absolute;
    margin-left:-999em;
    left:0;
    width:auto;
    }
    #menu-main-menu-2 li:hover ul{
    margin-left:0;
    }
    #menu-main-menu-2 ul li{white-space:nowrap;background:none}
    #menu-main-menu-2 ul li a:hover{background:none}
    You also need to sort out your ul id="nav as that is badly constructed and should be a div unless you want to nest another list element to hold the content.


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
  •