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:
And THE HTML:
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>