Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Dropdown menu

Posted on 2013-01-24
3
Medium Priority
?
458 Views
Last Modified: 2013-02-13
Please look at the following code and CSS.  I'm creating a popout and dropdown menu.

The second part, the dropdown part I can not seem to get working correct.  Can you please have a look and give me some advise about what to fix?

Thanks in advance.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Menu</title>
<style>
	nav, nav ul, nav li{
	padding:0;
	margin:0;
	}
	

	
nav ul li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.95em;
	color:#908f8f;
	float: left;
	background-image:url(../img/nav/nav-arrow.png);
	background-repeat:no-repeat;
	background-position:left;
	padding-left:5%;
	list-style: none;
	position: relative;
	width:110px;
	height: 30px;
	clear:left;
	background-color:#000;
	line-height: 30px;
	cursor:pointer;
}

	nav li a{
	text-decoration:none;
	color: white;
	float:left;
	}
	nav li:hover{
	background-color:none;
	}
	
	nav ul ul{
	position:relative;
	top:-30px;
	width:120px;
	left:110px;
	padding-left:5%;
	visibility:hidden;
	background-color:#333333;
	}
	nav ul li:hover ul{
	visibility:visible;
	}
	
	nav ul ul li:hover	{
		background-color:none;
	}
	
	nav ul ul li:hover ul{
	visibility:visible;
	}
	
	nav ul ul ul	{
		visibility:hidden;
	}

	
nav ul {
	background:;  
	padding-left:;
	margin:;
	list-style: ;
	position:;
}
	nav ul:after {
		content:;
		clear:; 
		display:;
	}

nav ul li {
	background-image:;
	font-family:;
	color:;
	float:;
	background-image:;
	background-repeat:;
	background-position:;
	padding-left:;
}
	nav ul li:hover {

	}
		nav ul li:hover a {
			color:;
		}
	
	nav ul li a {
		font-family:;
		display:; 
		color:;
		text-decoration:;
		padding:;
	}
	
	nav ul ul li  {
		float:; 
		color:;
		position:;
		font-family:Arial, Helvetica, sans-serif;
		font-size:;
		left:;
		padding:0% 0% 0% 10%;
		width:110px;
	}
		nav ul ul li:hover  {
		float:left;
		color:; 
		position: ;
		background:;
	}

	nav ul ul li a {
			padding:0% 0% 0% 0%;
		}	
			nav ul ul li a:hover {
				background: #none;
				color:#d9702a; 
			}

nav ul ul ul {
	position:absolute; 
	left:0px; 
	top:15px;
	width:100px;
	height:75px;
	background-color:#000000;
	visibility:hidden;
}
nav ul ul ul li  {
		float:; 
		color:;
		position:;
		font-family:Arial, Helvetica, sans-serif;
		font-size:;
		left:;
		padding:0% 0% 0% 10%;
		width:110px;	
}
nav ul ul ul ul {
	position:; 
	left:; 
	top:;
	width:100px;
	background-color:;
}


nav ul ul ul ul li a:hover {
	color:;
}
</style>
</head>

<body>

<div id="top_menu">
	<nav>
		<ul>
			<li><a href="#">PRODUCTS</a>
				<ul>
					<li>AMPLIFIERS
						<ul>
							<li><a href="#">MicroPro 200</a>
								<ul>
									<li><a href="#">Micro Proo 200 8"</a></li>
									<li><a href="#">Micro Pro 200 10"</a></li>
									<li><a href="#">Micro Pro 200 12"</a></li>
									<li><a href="#">Micro Pro 200 Head</a></li>
								</ul>
							</li>
							<li><a href="#">Aviator</a></li>
						</ul>
					</li>
					<li><a href="#">CABINETS</a></li>
					<li><a href="#">ACCESSORIES</a></li>
				</ul>
			</li>
			<li><a href="#">EXPERIENCE</a></li>
			<li><a href="#">PATRICK</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</nav>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38816356
your css is much too complicated.

This is using CSS from another example, so you'll have to adjust colors to your liking:

http://candpgeneration.com/EE/another-dd.html

(view source)
0
 
LVL 18

Accepted Solution

by:
Rartemass earned 2000 total points
ID: 38816558
To expand on kozaiwaniec's response, here are some reasons why it is too complicated.

-You list nav ul li {} twice in the CSS. By design, whatever comes last in the style sheet is the one the applies. So if you have the same thing listed twice, only the bottom most style will apply.

-You have things like nav ul ul ul ul ul li {}. This is quite difficult to remember where on the page you actually are. If you need that level of complexity you really need to name your elements with an ID or a class. An ID is unique and should only be used once in the code. A class can be repeated multiple times in the code. So if you want the same style applying to multiple elements, use a class and assign that class a style via CSS.
To apply a class to an element you would use class="name" like you did for the ID in your code.
This link explains the two:
http://www.w3schools.com/css/css_id_class.asp

My preference is to have each menu level as a new class. For example:
<ul id="topMenu">
<li><a href="link1.html">Vegies</a></li>
<li><a href="link2.html">Meat</a></li>
<li><a href="link3.html">Fruit</a>
   <ul class="secondLevel">
        <li><a href="link4.html" class="subItem">Citrus</a>
                <ul class="thirdLevel">
                       <li><a href="link5.html">Oranges</a></li>
                       <li><a href="link6.html">Key Lime</a></li>
                </ul>
       </li>
   </ul>
 </li>
</ul>

Open in new window


With all the specific names here, I can drill down exactly where I want to style them in the CSS.
For example:
#topMenu li { float: left;}
#topMenu ul.secondLevel {color: #FFFFFF;}
.subItem {background: url(image/arrow.gif) center right no-repeat;}
.thirdLevel li {padding-right: 0.2em;}

Open in new window


To give you more examples, I like the Son of Suckerfish menu layout presented here:
http://www.htmldog.com/articles/suckerfish/dropdowns/

The multi-level menu is about half way down the page. Working examples have links at the bottom.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38816611
suckerfish menus are also too complex, and moreover require javascript. yuk.

this is all the css you need for the above example (including the animation effect which gets ignored in old versions of IE):


      
nav a{
                text-decoration: none;
                text-transform: uppercase;
                color:#333;
                font-family: geneva, sans-serif;
                font-size:14px;
                background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAUCAYAAABWMrcvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDI3NkI3QTlENkJGMTFFMUJGRTg5MzBDRDYwNkY2QUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDI3NkI3QUFENkJGMTFFMUJGRTg5MzBDRDYwNkY2QUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0Mjc2QjdBN0Q2QkYxMUUxQkZFODkzMENENjA2RjZBQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0Mjc2QjdBOEQ2QkYxMUUxQkZFODkzMENENjA2RjZBQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj1JbwwAAACNSURBVHjalNPfCkAwFMfxM8/ChRvcuVA8g2cmuZIX4E00v8lqtD/nrL4Z9alZG2mtCVXvk5WdaAl0ERv+EQv6UBKGUBTGUBCmkBdykBm1i9QjYSk9lJ1kxBuH+8JBMxo/XyL/dKEN9ZKNOFEp2fIVFUhx0YIGyTEyS2okB3ZHueRqTKiTXsJWct1vAQYAvmjcHUntj7AAAAAASUVORK5CYII=') right center no-repeat;

            }
            nav ul{
                margin:0;
                padding:0;
            }
            .menu li{
                position:relative;
                width:220px;
                display:block;
                background-color:#eee;
                border-top:1px solid white;
                border-bottom:1px solid white;
                padding:0;
                margin:0;
                list-style: none;
                
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }
            .menu ul{
                display:none;
                width:0;
                position:absolute;
                left:220px;
                top:-1px; /* accommodate the border */
               
            }
            
            .menu li a{
                display:block;
                padding:7px 7px 2px;
                margin:3px;
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                transition: all 0.5s ease;
            }
            .menu li:hover{
                background-color: #ccc;
            }
            .menu li:hover > a{
                background-color: yellowgreen;
                color:darkslategray;
            }
            
            .menu li:hover > ul{
                display:block;
            }

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question