Drop Down menu overlapping other content

Discussion in 'Web Design and Development' started by geekindisguise, Oct 5, 2009.

  1. geekindisguise macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #1
    I had to add a Drop Down Menu to this website, and it works right now, but I really don't like how it looks. I want the Drop Down of the Navigation to be in a list and go straight down. I can make it do that, but its BEHIND everything below the navigation. I tried many things, but I just can't get it to be on top.

    Here is the CSS, and the HTML:

    Code:
    /*
    
    Text color: #bfb7a8
    Headers/Links: #425759
    Background: #332626
    
    */
    
    body {
    	margin:0;
    	padding:0;
    	font-family:Calibri, Arial;
    	color:#bfb7a8;
    	font-size:16px;
    	background:#332626;
    }
    
    .left {
    	float:left;
    }
    
    .right {
    	float:right;
    }
    
    a {color:#425759;}
    a:hover {color:#bfb7a8;}
    
    #dd-navi li a {color:#bfb7a8;}
    #dd-navi li a:hover {color:#425759;}
    
    img {
    	padding:5px;
    }
    
    #all {
    	width:700px;
    	margin:auto;
    	padding:0;
    }
    
    #header {
    	margin:0;
    	padding:0;
    	width:700px;
    	height:176px;
    	background:url(images/header.png) no-repeat;
    }
    
    #navi {
    	padding:0;
    	margin:0;
    	position:relative;
    	top:128px;
    	left:15px;
    	z-index:9;
    }
    
    #navi li {
    	list-style-type:none;
    	display:inline;
    	margin-right:20px;
    }
    
    #navi a {
    	text-decoration:none;
    	color:#425759;
    }
    
    #navi a:hover {
    	text-decoration:underline;
    	color:#332626;
    }
    
    li.dropdown ul { 
    	background:url(images/navi_bg.png);
    	display: none;
    	position:absolute;
    }
    
    li.dropdown:hover ul { 
    	display:block;
    }
    
    #dd-navi li{
    	display:inline;
    	margin:10px;
    	position:relative;
    }
    
    li.dropdown ul li a {
    	color:#bfb7a8;
    }
    
    li.dropdown ul li a:hover {
    	color:#425759;
    }
    
    #content {
    	width:698px;
    	background:#425759;
    	padding:0;
    	margin:0 0 0 1;
    }
    
    #boxes {
    	width:668px;
    	position:relative;
    	left:15px;
    }
    
    .box p {
    	padding:10px;
    	margin:auto;
    }
    
    .box {
    	margin:0;
    	padding:0px;
    	background:#332626;
    }
    
    .small {
    	width:32%;
    	height:100%;
    	text-align:center;
    }
    
    .medium {
    	height:100%;
    }
    
    #row {
    	width:668px;
    	height:200px;
    	display:block;
    	clear:all;
    	z-index:2;
    }
    
    #row-big {
    	width:668px;
    	height:240px;
    	display:block;
    	clear:all;
    }
    
    #s1 {
    	position:relative;
    	float:left;
    	display:inline-block;
    }
    
    #s2 {
    	position:relative;
    	float:left;
    	margin-left:15px;
    	display:inline-block;
    }
    
    #s3 {
    	position:relative;;
    	float:right;
    	display:inline-block;
    }
    
    #s4 {
    	position:relative;
    	float:left;
    	display:inline-block;
    }
    
    #m1 {
    	position:relative;
    	float:right;
    	display:inline-block;
    	width:66%;
    }
    
    #boxHeader {
    	display:block;
    	margin:0;
    	padding:0;
    	background:url(images/banner.png) repeat-x;
    	width:auto;
    	text-align:center;
    	color:#425759;
    	position:relative;
    }
    
    span.info {
    	background:url(images/info_bg.png);
    	display:none;
    	font-size:14px;
    	position:absolute;
    	margin-left:19px;
    	width:154px;
    	text-align:center;
    	
    
    }
    
    #spacer {
    	height:25px;
    	display:block;
    	background:#425759;
    }
    
    #footer {
    	position:relative;
    	left:1px;
    	width:700px;
    	height:48px;
    	background:url(images/footer.png);
    }
    
    And THE HTML:

    Code:
    <html>
    <head>
    	<title>Brothers' Jewelers | Beta!</title>
    	
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	
    </head>
    <body>
      <div id="all">
    	<div id="header">
    		<ul id="navi">
    			<li><a href="index.php">Home</a></li>
    			<li class="dropdown"><a href="#">Grove Selection</a>
    			<ul id="dd-navi">
    				<li><a href="grove-turq.php">Turquoise</a></li>
    				<li><a href="grove-watches.php">Watches</a></li>
    				<li><a href="grove-clocks.php">Clocks</a></li>
    				<li><a href="grove-other.php">Other Jewelry</a></li>
    			</ul>
    			</li>
    			<li class="dropdown"><a href="#">Siloam Springs Selection</a>
    			<ul id="dd-navi">
    				<li><a href="ss-rings.php">Rings</a></li>
    				<li><a href="ss-ear.php">Earings/Pendants</a></li>
    				<li><a href="ss-watches.php">Watches/Clocks</a></li>
    				<li><a href="ss-special.php">Custom Jewelry & Misc</a></li>
    			</ul>
    			</li>
    			<li><a href="about.php">About Us</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<div id="boxes">
    
    <div id="row">
    		<div class="box small" id="s1">
    			<span id="boxHeader">Buy</span>
    		<p>Gold and Silver coins, Gold and Silver jewelry, diamonds and precious gems.</p>
    		</div>
    		<div class="box small" id="s2">
    			<span id="boxHeader">Sell</span>
    		<p>Custom hand made, one of a kind pieces, citizen watches, antique jewelry and estate jewelry. 
    		Also have consignment pieces handmade and old signed Turquoise jewelry.</p>
    		</div>
    		<div class="box small" id="s3">
    			<span id="boxHeader">Trade</span>
    		<p>Will trade for  anything of value that does not eat.</p>
    		</div>
    </div>
    
    <div id="spacer"></div>
    
    		<div class="box">
    			<span id="boxHeader">Welcome</span>
    			<p> Brothers Jewelers of Grove, Oklahoma and Siloam Springs, Arkansas will work hard to earn your business. 
    			From design to completion All work is done on location. Let us be your Brothers in  the jewelry business.</p>
    		</div>
    		
    <div id="spacer"></div>
    
    <div id="row-big">
    		<div class="box small" id="s4">
    			<span id="boxHeader">Contact</span>
    lalalalalalala
    		</div>
    		<div class="box medium" id="m1">
    			<span id="boxHeader">Location</span>
                                   <p>
    				lalalalalala
    				</p>
    				
    			
    		</div>
    </div>
    		
    <div id="spacer"></div>	
    		</div>
    	</div>
    	<div id="footer"></div>
      </div>
    </body>
    </html>
     
  2. RonCarr macrumors regular

    RonCarr

    Joined:
    Sep 12, 2007
    Location:
    Tennessee
    #2
    You might try this:

    instead of having a all container, just list those properties for the body. Then wrap your content in a div and your navigation outside of that. See if that works, if not check back.

    Scratch that, just move your "all" div to after your "header" div. You will have to copy the CSS properties from the "all" div and put them in the "header" div also.
     

Share This Page