Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post

    jQuery Multi Level CSS Menu #2

    I used jQuery Multi Level CSS Menu #2 from Dynamic Drive ( url http://www.dynamicdrive.com/style/cs...el_css_menu_2/ )

    I could not retain the hover state of the main menu when the cursor is its sub-menus. I tried the following:

    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;
    }

    changed to:

    .jqueryslidemenu ul li a:hover, .jqueryslidemenu ul li:hover a{
    background: black; /*tab link background during hover state*/
    color: white;
    }

    AND

    .jqueryslidemenuz ul li ul li a:hover

    to

    .jqueryslidemenuz ul li ul li a:hover, .jqueryslidemenuz ul li ul li:hover a

    {.jqueryslidemenuz supposed to be .jqueryslidemenu }

    Still not working. The sub-menus retain the hover state of the main menu, and during hover on the sub-menu, then that menu alone display its sub-menu hover state.

    Any ideas?

    Thank you

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You need to provide a link or the complete code at your end, since the dropdown in the original link works fine.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    Can you please mention the code?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by Paramasivan View Post
    Can you please mention the code?
    To know what's going wrong at your end, you need to show the complete code at your end.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    Code:
    .jqueryslidemenu{
    font: bold 13px Arial, Helvetica, sans-serif;
    width: 950px;
    height:56px;
    margin:0 auto;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    
    color: white;
    padding: 21px 27px 19px 25px;
    background:url(../images/divider.jpg) top right no-repeat;
    
    text-decoration: none;
    }
    .jqueryslidemenu ul li a.lastmenu{
    	background:none;
    }
    .jqueryslidemenu ul li a.startmenu{
    	padding: 21px 25px 19px 0px;
    }
    .jqueryslidemenu ul li a.startmenu:hover{
    	background:url(../images/menu_hover1.jpg) top left no-repeat;
    }
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    
    
    .jqueryslidemenu ul li a:hover{
    background: url(../images/menu_hover.jpg) top left no-repeat; /*tab link background during hover state*/
    color:#8ec546;
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0px;
    display: block;
    visibility: hidden;
    margin-left:10px;
    }
    .jqueryslidemenu ul li ul li ul{
    	margin-left:0px;
    }
    .jqueryslidemenu ul li ul.startmenu1{
    	margin-left:0px;
    }
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    border:none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    z-index:100;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Arial, Helvetica, sans-serif;
    color:#e6e6e6;
    width: 200px; /*width of sub menus*/
    padding: 13px 0 13px 15px;
    margin: 0;
    border-top-width: 0;
    background:#323232 url(../images/sub_bottom.jpg) bottom left no-repeat;
    }
    .jqueryslidemenu ul li ul li a.botlink {
    	background:#323232 url(../images/menubotbg.jpg) bottom left no-repeat;
    }
    .jqueryslidemenu ul li ul li a:hover{ /*sub menus hover style*/
    background:#161616;
    color:#e6e6e6;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 17px;
    right: 22px;
    }
    
    -----------------------------------------------------------------
    
    <div id="myslidemenu" class="jqueryslidemenu">
              <ul>
                  <li><a href="Monitoring.html" title="Monitoring" class="startmenu">Monitoring</a>
                       <ul class="startmenu1">
                           <li><a href="MonitorsList.html" title="Monitors List">Monitors List</a></li>
                           <li><a href="ContactsList.html" title="Contacts List">Contacts List</a></li>
                       </ul>
                  </li>
                  <li><a href="Reports.html" title="Reports">Reports</a>
                       <ul>
                           <li><a href="TestStatus.html" title="Test Status">Test Status</a></li>
                           <li><a href="Summary.html" title="Summary">Summary</a></li>
                           <li><a href="Charts.html" title="Charts">Charts</a></li>
                           <li><a href="TestLog.html" title="Test Log">Test Log</a></li>
                           <li><a href="FailureLog.html" title="Failure Log">Failure Log</a></li>
                       </ul>
                  </li>
                  <li><a href="Tools.html" title="Tools">Tools</a>
                       <ul>
                           <li><a href="PingTest.html" title="Ping Test">Ping Test</a></li>
                           <li><a href="HTTPBasicTest.html" title="HTTP Basic Test">HTTP Basic Test</a></li>
                           <li><a href="HTTPStandardTest.html" title="HTTP Standard Test">HTTP Standard Test</a></li>
                       </ul>
                  </li>
                  <li><a href="Account.html" title="Account" class="lastmenu">Account</a>
                       <ul>
                           <li><a href="AccountInfo.html" title="Account Info">Account Info</a></li>
                           <li><a href="Users.html" title="Users">Users</a></li>
                           <li><a href="Billing.html" title="Billing">Billing</a>
                               <ul>
                                   <li><a href="BillingInfo.html" title="Billing Info">Billing Info</a></li>
                                   <li><a href="BillingChangeLog.html" title="Billing Change Log">Billing Change Log</a></li>
                               </ul>
                           </li>
                       </ul>
                  </li>
              </ul>
              
              
         </div>   <!--  end myslidemenu  -->

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Thats not your complete code. A link to your site would be the best thing.
    Teed

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    Not yet hosted.

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    Please see http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    I used nothing but same, only menu items changed.

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    When the cursor is in its sub menu, I want to retain the hover state of the sub-menu as well as the hover state of the main menu (when cursor is in its sub-menu).

    In the original code of Dynamic Drive, hover state of the main menu is not retained when the cursor is in its sub menu.

    Will Javascript or jQuery will do this function?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •