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 2 of 2
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    923
    Thanks
    76
    Thanked 29 Times in 29 Posts

    Targeting a sub-level menu to keep it displayed?

    Good evening,

    I am trying to make a multi level css menu. I have got it displayed where I need it but when I try to mouseover the sub-level menu, it disappears. I think it's because my jQuery hover function sets the sub-level menu to display: none when the parent list-item is moused out. Another thing to note is that my sub-level is set to display:none in the CSS.

    My HTML:
    Code:
    <ul id="navigation">
            <li><a href="?page=home">Home</a></li>
            <li><a href="?page=categories">Categories</a>
                <ul>
                    <li><a href="?page=categories&product=arts">Arts</a></li>
                    <li><a href="?page=categories&product=beauty">Beauty</a></li>
                    <li><a href="?page=categories&product=cars">Cars</a></li>
                </ul>
            </li>
            <li><a href="?page=about">About</a></li>
        </ul>
    My CSS:
    Code:
    #navigation
    {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
        background: red;
    }
    
    #navigation li
    {
        display: inline-block;
        float: left;
        background: red;
        border-right: 2px solid #fff;
        position: relative;
    }
    
    #navigation li a
    {
        background: navy url("../images/gradient_blue.jpg");
        background-size: cover;
        text-decoration: none;
        display: inline-block;
        padding: 15px;
        color: #fff;
    }
    
    #navigation li a:hover
    {
        background: navy url("../images/gradient_blue_flipped.jpg");
        background-size: cover;
        margin: 0px;
    }
    
    #navigation li ul
    {
        display: block;
        position: absolute;
        list-style-type: none;
        padding: 0px;
        left: 0px;
    }
    
    #navigation li ul > li
    {
        display: list-item;
        float: none;
    }
    
    #navigation li ul li a
    {
        width: 150px;
        border: 1px solid #fff;
        border-bottom: none;
        border-right: none;
        padding: 8px;
    }
    The jquery is very simple and looks like:
    Code:
    $(function(){
        $('#navigation li a').hover(function(){
            $(this).next('ul').css("display","list-item");
        },function(){
            $(this).next('ul').css("display","none");
        });
        
        $('#navigation li ul li:nth-last-child(1) > a').css("border-bottom","1px solid white");
    
    });
    Any JS gurus can kindly point me in the right direction?

    Kind regards,

    LC.

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    923
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Anyone got any thoughts?


  •  

    Posting Permissions

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