SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS issue (Dropdown Menu)

    Okay, I have looked at several tutorials, I have been toying around with it for a while, and I know it is probably something really simple or just something I am overlooking, but I can't figure out why this is happening.

    HTML File: http://pastebin.com/seTsfEnN
    CSS File: http://pastebin.com/fFHNUdQw

    Please ignore the horrible look, i'm just trying to get the functionality correct first. If you see, when you go over the "Courses" menu, it pulls down properly. However, when you go the third level (I need to go 3 levels deep), it does pull out, but it doesn't function as you would hope. It pushes the main links over, and it also messes up when you try to go to the other submenu items at level 2. I think if you check it out you will quickly see how it doesn't function properly. Any help would be very appreciated!

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

    You need to remove the nested lists from the flow so they don't impact on the layout. That means the nested uls should be position:absolute.

    You don't need any of those classes as all items can be accessed from #nav quite easily.

    e.g.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link href='menustyle.css' rel='stylesheet' type='text/css'>
    <style type="text/css">
    body {
    	font-family: 'Lusitana', serif;
    	font-size: 14px;
    	margin: 0px;
    	padding: 0px;
    	color: #444;
    	background-color: #f6f6f6;
    }
    /* remove the list style */
    #nav, #nav ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #nav li {
    	float:left;
    	padding-left: 10px;
    	padding-right: 10px;
    	border: 1px solid #DDD;
    	text-transform:uppercase;
    	height:30px;
    	line-height:30px;
    	position:relative;
    }
    #nav li li {
    	text-transform:none;
    	float:none;
    	white-space:nowrap;/* or use a width*/
    	height:auto;
    	line-height:normal;
    }
    #nav ul {
    	position:absolute;
    	display:none;
    	top:30px;
    	left:0;
    }
    #nav ul ul {
    	left:100%;
    	top:-1px;
    }
    
    </style>
    <link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css'>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
    	$('#nav li').hover(
    		function () {
                //show its submenu
                $('ul:first', this).slideDown(100);
            },
            function () {
                //hide its submenu
                $('ul:first', this).slideUp(100);        
            }
    	);
    });
    </script>
    </head>
    <body>
    <ul id="nav">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Courses</a>
    				<ul>
    						<li><a href="#">Item 01</a>
    								<ul>
    										<li><a href="#">Sub Item 01</a></li>
    										<li><a href="#">Sub Item 02</a></li>
    										<li><a href="#">Sub Item 03</a></li>
    								</ul>
    						</li>
    						<li><a href="#">Item 02</a></li>
    						<li><a href="#">Item 03</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Student Services</a>
    				<ul>
    						<li><a href="#">Item 04</a></li>
    						<li><a href="#">Item 05</a></li>
    						<li><a href="#">Item 06</a></li>
    						<li><a href="#">Item 07</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Current Students</a></li>
    		<li><a href="#">Future Students</a></li>
    		<li><a href="#">Helpful Links</a></li>
    </ul>
    </body>
    </html>
    For accessibility the off-left method is better than display:none but won't work nicely with your slide down.

    Also you should make the menu work without js to start with using :hover and then enhance it with JS afterwards. In that way you will still have a working menu when js is disabled.

    e.g.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link href='menustyle.css' rel='stylesheet' type='text/css'>
    <style type="text/css">
    body {
    	font-family: 'Lusitana', serif;
    	font-size: 14px;
    	margin: 0px;
    	padding: 0px;
    	color: #444;
    	background-color: #f6f6f6;
    }
    /* remove the list style */
    #nav, #nav ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #nav li {
    	float:left;
    	padding-left: 10px;
    	padding-right: 10px;
    	border: 1px solid #DDD;
    	text-transform:uppercase;
    	height:30px;
    	line-height:30px;
    	position:relative;
    }
    #nav li li {
    	text-transform:none;
    	float:none;
    	white-space:nowrap;/* or use a width*/
    	height:auto;
    	line-height:normal;
    }
    #nav ul {
    	position:absolute;
    	top:30px;
    	left:0;
    }
    #nav ul ul {
    	left:100%;
    	top:-1px;
    }
    .nav ul{display:none}
    .nojs li:hover ul{display:block}
    .nojs li:hover li ul{display:none}
    .nojs li li:hover ul{display:block}
    
    </style>
    <link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css'>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
    	$('#nav').removeClass('nojs');
    	$('#nav li').hover(
    		function () {
                //show its submenu
                $('ul:first', this).slideDown(100);
            },
            function () {
                //hide its submenu
                $('ul:first', this).slideUp(100);        
            }
    	);
    });
    </script>
    </head>
    <body>
    <ul id="nav" class="nav nojs">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Courses</a>
    				<ul>
    						<li><a href="#">Item 01</a>
    								<ul>
    										<li><a href="#">Sub Item 01</a></li>
    										<li><a href="#">Sub Item 02</a></li>
    										<li><a href="#">Sub Item 03</a></li>
    								</ul>
    						</li>
    						<li><a href="#">Item 02</a></li>
    						<li><a href="#">Item 03</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Student Services</a>
    				<ul>
    						<li><a href="#">Item 04</a></li>
    						<li><a href="#">Item 05</a></li>
    						<li><a href="#">Item 06</a></li>
    						<li><a href="#">Item 07</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Current Students</a></li>
    		<li><a href="#">Future Students</a></li>
    		<li><a href="#">Helpful Links</a></li>
    </ul>
    </body>
    </html>

    Hope that helps

    You may be interested in superfish which works on the suckerfish menus and automates a lot of the js work.

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul! That helped emensly and gave me the exact information I was looking for. I really do appreciate the help!

    I am going to check out superfish as well.


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
  •