CSS issue (Dropdown Menu)

HTML & CSS
1

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

Hi Welcome to Sitepoint :slight_smile:

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.


<!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.


<!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 [URL=“http://www.alistapart.com/articles/dropdowns”]suckerfish menus and automates a lot of the js work.

3

Thank you Paul! That helped emensly and gave me the exact information I was looking for. I really do appreciate the help! :slight_smile:

I am going to check out superfish as well. :slight_smile: