Jump to content
MediaSvcsUnlimited

dropdown menu with css

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.