dropdown menu with css

MediaSvcsUnlimited · June 2, 2016

Hi, I'm trying to do a dropdown menu with CSS. The dropdown menu appears whether the mouse is over the menu or not. if someone could help me figure out what 's wrong, I would really appreciate it.

z<php
require_once('functions.php');
?>  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel = "stylesheet" href = "Bixler.css">
<style type="text/css">
	nav {
		padding-top:2%; 
		width:30%; 
		height:27px;
		margin-left:auto;
		margin-right:auto; 
	}
	nav ul {
		list-style-type:none; 
	}
	nav > ul li a {
		padding:50px;  
	}
	
	nav li {
		float:left; 
	}
	nav > ul > li > ul {
		display:none; 
		position:absolute; 
	}
	nav > ul > li:hover > ul {
		display:block; 
	}
	#logo {
		width:304px;
		margin-left:auto; 
		margin-right:auto; 
	}
	h3 {
		color:red;
		text-align:center;
	}
	#contactInfo {
		float:left; 
	}
	#servicesList, #eocialMedia {
		float:right; 
		width: 33%; 
	}
	article {
		float:left; 
		width:35%;
		height:45%;
		margin-left:10%; 
		background-color:#FFFFFF;
	}
	aside {  
		float:right;    
		width:30%;
		height:35%;
		margin-right:10%; 	
		background-color:#FFFFFF;	
	}
	footer {
		background-color:#000000;
		overflow:auto; 
		color:#C4C4C4;
  		clear:both;
	}
</style>
</head>
<body>
<header>
<nav>
	<ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
        	<ul>
       	    	<li><a href="#">Agents</a></li>
		    	<li><a href="#">Locations</a></li>                
			</ul>
    	<li><a href="#">Services</a></li>               
    	<li><a href="services.php" tabindex="3" accesskey="S">Services</a></li>
    	<li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li>
    	<li><a href="contact.php" tabindex="5" accesskey="C">Contact</a></li>
   </ul>
</nav>  
	<figure id="logo">
   		<img src="assets/bixlerlogo.png" width="304" height="88" alt=""/>
    </figure>
    <h3>Service Beyond The Contract </h3>
</header>
<article>

</article>
<aside>

</aside>
<footer>
	<div id="contactInfo">
    	Bixler Insurance <br/>
	    1043 South 13th St. <br />
	    Decatur, IN 46733<br />
		Phone: (260)-724-3438
    </div>
    <div id="eocialMedia">
		social media icons
    </div>    
    <div id="servicesList">
    	list of services
    </div>
</footer>
</body>
</html>

Psycho · June 2, 2016

1. This HTML is messed up. The Child UL element is NOT within an LI element.

2. The width of 30% for the nav container causes the parent links to wrap if the page width is not big enough (which will cause further problem with the 'dropdown' child elements). I set it at a fixed 500px to prevent problems in my test code - change to whatever works for you

3. The padding of 50px seems to be excessive. I think that was a mistake. I changed it to 5px

Here is your same code with fixes for the above issues. I stripped out all the unrelated elements

<html>
<head>
 
<style type="text/css">
nav {
padding-top:2%; 
width:500px;
height:27px;
margin-left:auto;
margin-right:auto; 
}
 
nav ul {
list-style-type:none; 
}
 
nav li {
float: left;
}
 
nav > ul li a {
padding-left: 5px;
}
 
nav > ul > li:hover > ul {
display:block;
}
 
nav > ul > li > ul {
display:none;
position:absolute;
}
 
</style>
</head>
<body>
<header>
<nav>
<ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About Us</a>
   <ul>
             <li><a href="#">Agents</a></li>
    <li><a href="#">Locations</a></li>                
</ul>
</li>
     <li><a href="#">Services</a></li>
     <li><a href="services.php" tabindex="3" accesskey="S">Services</a></li>
     <li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li>
     <li><a href="contact.php" tabindex="5" accesskey="C">Contact</a></li>
   </ul>
</nav>  
</header>
 
</body>
</html>

MediaSvcsUnlimited · June 3, 2016

ah I see the problem now! Thanks so much for the help

Sign In

dropdown menu with css

Recommended Posts

MediaSvcsUnlimited

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

MediaSvcsUnlimited

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information