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

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8

    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,133
    Rep Power
    119
    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
    299
    Rep Power
    8
    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,133
    Rep Power
    119
    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