SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Clarkston, WA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down menu with vertical sub nav - help!

    I'm having an issue with menus - I'm trying to style a nested nested menu item... for example,

    HTML Code:
    <ul>
      <li><a href="#">Parent Menu Item</a>
          <ul>
                <li><a href="#">Child Menu Item</a>
                      <ul>
                            <li><a href="#">Child's Menu Item</a></li>
                      </ul>
                </li>
          </ul>
      </li>
    </ul>
    I can't seem to get the child's menu item to hide until hovered... I'm sure I'm just having a massive brain fart, but if somebody could refresh my memory that would be fantastic... It just gets so confusing with all the sub menu items when you're already one level deep.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You didn't post your CSS, lol.


    But the basic premise behind a drop down is this :

    li > ul {/*your hiding method*/}
    li:hover > ul {/*reveal metod*/}

    Note I am not taking IE6 support in to consideration here.


    BTW a good hide/reveal method is:

    li{ position:relative;}
    li > ul {position:absolute; left:-999em}
    li:reveal > ul {position:absolute; left:0; top:100%; margin-top:-2px}

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Clarkston, WA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, dumb, here's the first level & sub level styling.. I still have no clue what I'm doing wrong

    /* -------->> NAV <<<-----------*/
    ul.page-nav {
    display: table;
    height: 30px;
    list-style-type: none;
    margin: 0 auto;
    }
    ul.page-nav li {
    color: #fff;
    display: inline;
    float: left;
    font-family: 'Cantarell', arial, serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    list-style-type: none;
    margin: 0;
    padding:0;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 128px;
    _padding: 0;
    _height: 30px;
    _line-height: 16px;
    }
    ul.page-nav li a {
    color: #fff;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: 128px;
    }
    ul.page-nav li a:hover {
    background-color: #24100c;
    color: #fff;
    display: inline;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    padding: 0;
    text-decoration: none;
    top: 0px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    _padding: 0;
    _top: 0;
    }

    ul.page-nav li:hover ul {
    display: block;
    position: absolute;
    z-index: 4;
    }
    ul.page-nav li ul {
    background-color: #EBE4C8;
    display: none;
    padding-top: 10px;
    position: absolute;
    top: 30px;
    left: -16px;
    }
    ul.page-nav li ul li {
    background-color: #EBE4C8;
    font-size: 13px;
    line-height: 13px;
    display: inline;
    margin: 0 11px 10px;
    position: relative;
    text-align: left;
    width: 150px;
    *margin: 0;
    }
    ul.page-nav li ul li a {
    color: #24100c;
    display: inline;
    list-style-type: none;
    padding: 0 0 0 10px;
    position: relative;
    text-decoration: none;
    width: 150px;
    margin: 0;
    }
    ul.page-nav li ul li a:hover {
    background-color: #EBE4C8;
    color: #606046;
    display: inline;
    list-style-type: none;
    padding: 0 0 0 10px;
    position: relative;
    text-decoration: none;
    width: 150px;
    margin: 0;
    }


    /*--- sub child menu styling ----*/

    ul.page-nav ul li ul li:hover{
    display: block;
    position: absolute;
    z-index: 4;
    }
    ul.page-nav li ul li ul {
    background-color: #EBE4C8;
    display: none;
    padding-top: 10px;
    position: absolute;
    top: 0px;
    left: 100px;
    }
    ul.page-nav li ul li ul li{
    background-color: #EBE4C8;
    font-size: 13px;
    line-height: 13px;
    display: inline;
    margin: 0 11px 10px;
    position: relative;
    text-align: left;
    width: 150px;
    *margin: 0;
    }
    ul.page-nav li ul li ul li a {
    color: #24100c;
    display: inline;
    list-style-type: none;
    padding: 0 0 0 10px;
    position: relative;
    text-decoration: none;
    width: 150px;
    margin: 0;
    }
    ul.page-nav li ul li ul li a:hover {
    background-color: #EBE4C8;
    color: #606046;
    display: inline;
    list-style-type: none;
    padding: 0 0 0 10px;
    position: relative;
    text-decoration: none;
    width: 150px;
    margin: 0;
    }

  4. #4
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your CSS is more complex than it needs to be, and very inefficient. Check out http://nekkidblogger.com/2011/ultra-...dblogger-menu/

    It does it all with five rules


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
  •