#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    10

    Keeping sub-level


    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");
    
    });
    Can anyone guide me on how to achieve this?

    Kind regards,

    NM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    187
    I had to change your code around a bit, but I think this should do the trick for you:
    Code:
    <style>
    #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;
    }
    
    #navigation li ul {
    display:none;
    }
    
    </style>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
    <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>
    
    <script>
    
    $('#navigation li').hover(
        function () {
            $('ul', this).css('display','block');
        },
        function () {
            $('ul', this).css('display','none');
        }
    );
    $('#navigation li ul li:nth-last-child(1) > a').css("border-bottom","1px solid white");
    
    </script>

    Comments on this post

    • Nanomech agrees : Fantastic!
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    10
    Thank you very much indeed.

    Would you kindly walk me through that jQuery?

    How does it target only the list item with a child which is a <ul>?

    How does it know to stay displayed when I hover over the sub-level menu?

    Many thanks!

    Kind regards,

    NM.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    187
    To give you your answer; we will take the follow piece of this code:
    Code:
    $('ul', this).css('display','block');
    where "ul" would refer to the the "ul" children of the "#navigation li". And "this" would refer to the #navigation li child ul; that currently is being hovered over. That may sound kind of confusing, but that is the best way, that I know how to explain it.

IMN logo majestic logo threadwatch logo seochat tools logo