SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question CSS/ jQuery Dropdown- Making the Lists Show

    Hello everyone,

    I have a home page menu that has 4 nested lists one menu. I am trying to style the menu with CSS and make the lists display on hover with JavaScript / jQuery.

    Right now, the menu displays a hover effect on the top level, but when I move down to navigate the first sub-list, the menu disappears (like it shouldn't do). How can I refine my CSS to allow JavaScript to show all these lists?

    Code:
    /********************/
    /*PERSONAL NAV MENU**/
    /********************/
    .pWrapper {
        padding-bottom:53%;
        padding-left:8%;
    }
    .pMenu {
        margin:0;
        padding:0;
        list-style:none;
    }
    /*IE 6 & 7 need inline block feature*/
    ul.pMenu ul li a {
        width:100%;
        display:inline-block;
    }
    ul.pMenu ul li ul li a {
        width:100%;
        display:inline-block;
    }
    ul.pMenu ul li ul li ul li a {
        width:100%;
        display:inline-block;
    }
    /*top level li specifications*/
    #health {
        width:8%;
        padding-right:2%;
    	margin-right:2%;
    }
    #insurance {
        width:14.5%;
        padding-right:2%;
    	margin-right:2%;
    }
    #shopping {
        width:14%;
        padding-right:2%;
    	margin-right:2%;
    }
    #dating {
        width:11%;
        padding-right:2%;
    	margin-right:2%;
    }
    #education {
        width:15.5%;
    }
    
    /*begin main list attributes*/
    ul.pMenu li:hover a {
        background:#F00;
        border:.33em ridge #C90;
        color:#FF0;
    }
    
    ul.pMenu li {
        float:left;
        list-style:none;
    	margin-right:2%;
    }
    
    ul.pMenu li a {
        display:block;
        color:#FFF;
        background:#900;
        border:.33em ridge #C30;
        text-decoration:none;
        text-shadow:1px 1px 1px #000;
        white-space:nowrap;
        padding-top:.7em;
        padding-left:.3em;
        padding-right:.3em;
        padding-bottom:.7em;
    }
    ul.pMenu li a:hover {
        background:#F00;
        border:.33em ridge #C90;
        color:#FF0;
    }
    /*first sub-list*/
    ul.pMenu li:hover > ul li a {
        width:10em;
        background:#CCC;
        border:.25em outset #999;
        height:1em; 
        font-size:12px;
        padding-left:4%;
        padding-right:10%;
        text-shadow:1px 1px 1px #000;
        color:#000;
        position:relative;
        display:block;
    }
    
    ul.pMenu li{
    	margin-right:.2em;
    }
    
    ul.pMenu li li{
    	margin-right:0;
    }
    
    ul.pMenu li ul {
        margin:0;
        padding:0;
        position:absolute;
        visibility:hidden;
    }
    ul.pMenu li ul li {
        float:none;
        top:33px;
    }
    ul.pMenu li ul li a {
        width:10em;
        background:#CCC;
        border:.25em outset #999;
        height:1em;
        font-size:12px;
        padding-left:4%;
        padding-right:10%;
        text-shadow:1px 1px 1px #000;
        color:#000;
        position:relative;
        display:block;
    }
    ul.pMenu li ul li a:hover {
        background:#999;
        border:.25em inset #666;
        text-decoration:blink;
    }
    /*second sub-list*/
    ul.pMenu li ul li ul {
        margin:0;
        padding:0;
        position:absolute;
        visibility:hidden;
        display:none;
    }
    ul.pMenu li:hover > ul {
        visibility:visible;
    }
    ul.pMenu li ul li ul li {
        float:none;
        display:inline;
    }
    ul.pMenu li ul li ul li a {
        width:auto;
        background:#999;
        border:.15em outset #666;
        text-shadow:1px 1px 1px #000;
        color:#FFF;
    }
    ul.pMenu li ul li ul li a:hover {
        background:#999;
        border:.15em inset #666;
        text-decoration:blink;
    }
    /*third sub-list*/
    ul.pMenu li ul li ul li ul {
        margin:0;
        padding:0;
        position:absolute;
        visibility:hidden;
    }
    ul.pMenu li ul li ul li {
        float:none;
        display:inline;
    }
    ul.pMenu li ul li ul li a {
        width:auto;
        background:#999;
        border:1% outset #666;
        text-shadow:1px 1px 1px #000;
        color:#FFF;
    }
    ul.pMenu li ul li ul li a:hover {
        background:#999;
        border:1% inset #666;
        text-decoration:blink;
    }
    /******************/
    /*End Personal Nav*/
    /*****************/
    this is my JavaScript:

    Code:
    <script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var timeout    = 1000;
    var closetimer = 0;
    var ddmenuitem = 0;
    
    function jsddm_open()
    {  jsddm_canceltimer();
       jsddm_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
    
    function jsddm_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    
    function jsddm_timer()
    {  closetimer = window.setTimeout(jsddm_close, timeout);}
    
    function jsddm_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}
    
    $(document).ready(function()
    {  $('.pMenu > li').hover(jsddm_open, jsddm_timer)
       $('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});
    
    document.onclick = jsddm_close;
    </script>
    I hope I finish this menu soon!

  2. #2
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello, is anybody out there?


Tags for this Thread

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
  •