Drop Down Menu Please Help

Discussion in 'CSS' started by wondercorn, Jan 8, 2009.

0
  1. #1
    I got problem with drop down menu.
    Instead of hidden, it's show up even i already set the status hidden and given hover behavior to display block.

    Please help.

    Here are the codes. As you can see I already omit the section with problem with comment tag.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SilverOSilver.Com Your One Stop for Silver Needs</title>
<link href="styles.css" rel="stylesheet" />
</head>

<div id="container">

	<div id="header">
    <h1>SilverOSilver</h1>
    </div><!--header ender-->
    
    <div id="container2">
        <div id="nav">
        	<ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Our Products</a></li>
            <!--
                <ul>
                <li><a href="#">Rings</a></li>
                <li><a href="#">Earrings</a></li>
                <li><a href="#">Chains</a></li>
                <li><a href="#">Pendants</a></li>
                <li><a href="#">Necklaces</a></li>
                <li><a href="#">Bangles</a></li>
                <li><a href="#">Anklets</a></li>
                <li><a href="#">Special Sets</a></li>
                </ul>
                -->
            <li><a href="#">Resources &amp; Download</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>    
        	</ul>
        </div><!--nav ender-->
    </div><!--container2 ender-->
    
    <div id="container3">
        <div id="bannerprimary">
            <h2>FEATURING</h2>
            <img src="images/bigbox.gif" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit quam, egestas ut, pretium quis, mattis ut, lacus. Duis malesuada. Cras eget nunc at risus ornare tempus. Aliquam dolor quam, ultrices sed, dignissim ac, viverra ut, orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut odio. Ut nec velit quis risus euismod vehicula. Integer velit pede, congue ut, sollicitudin a, scelerisque ac, purus. Suspendisse aliquam. Cras pretium posuere felis. </p>
        </div><!--bannerprimary ender-->
    
        <div id="bannersecondary">
            <h2>JOIN US</h2>
            <p>Join our community by signing-up the form below</p>
        </div><!--bannersecondary ender-->    
    </div><!--container3 ender-->
    
    <div id="container4">
        <div id="primary">
            <h2>NEW ITEMS</h2>
                <img src="images/smallbox.gif" />
                <img src="images/smallbox.gif" />
                <img src="images/smallbox.gif" />
                <img src="images/smallbox.gif" />
            <h2>HOT ITEMS</h2>
                <img src="images/smallbox.gif" />
                <img src="images/smallbox.gif" />
                <img src="images/smallbox.gif" />
                <img src="images/smallbox.gif" />
        
        </div><!--primary ender-->
    
        <div id="secondary">
            <h2>SPONSOR</h2>
            <p>List of our Sponsors</p>
            <img src="images/smallbox.gif" />
            <img src="images/smallbox.gif" />
       
    
        </div><!--secondary ender-->
    </div><!--container4 ender-->
    
    <div id="footer">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Our Products </a></li>
                <!--<ul>
                <li><a href="#">Rings</a></li>
                <li><a href="#">Earrings</a></li>
                <li><a href="#">Chains</a></li>
                <li><a href="#">Pendants</a></li>
                <li><a href="#">Necklaces</a></li>
                <li><a href="#">Bangles</a></li>
                <li><a href="#">Anklets</a></li>
                <li><a href="#">Special Sets</a></li>
                </ul>-->
        <li><a href="#">Resources &amp; Download</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li> 
        </ul>
        <p>SilverOSilver.Com All Rights Reserved</p>
    

   
    </div><!--footer ender-->

</div><!--container ender-->


<body>


</body>
</html>
    Code (markup):

    Here are the CSS codes

    body {
text-align: center;
font-family: "century gothic", helvetica, arial, sans-serif;
font-size: 100%;
background-color: #e2e2e2;
}

a {
text-decoration: none;
color: #1e1e1e
}

a:hover {
text-decoration: underline;
}

a.selected{
font-weight: bold;
}

p {
color: #1a1a1a;
line-height: 21px;
}

h2 {
color: #1a1a1a;
font-size: 30px;
}

li {
list-style: none;
}

#container {
margin: auto;
width: 800px;
text-align: left;
background-color: #ffffff;
}

#header {
position: relative;
padding: 15px 0px 0px 115px;
}

#header h1{
text-indent: -9999px;
background: url(images/header.gif) no-repeat;
height: 62px;
}

#container2 {
clear: both;
width: 640px;
margin: 0px 0px 0px 80px;
padding: 0px 0px 0px 0px;
background: #1a1a1a;
float: left;
/*border: 5px solid #ccc;*/
}

#nav {
position: relative;
float: left;
margin: 0px 0px 0px -20px;
overflow: hidden;
height: 50px;
}

#nav a {
display: block;
}

#nav li{
float: left;
position: relative;
line-height: 20px;
font-size: 10px;
}

#nav li a{
border-right: 1px solid #fff;
color: white;
padding: 0em 1.2em;
}

#nav li a.first{
padding: 0em;
}

#nav li ul {
position: absolute;
width: 7em;
display: none;
}


#nav li:hover ul {
display: block;
}


#nav li ul li{
width:100%;
display: none;
}


#container3 {
float: left;
position: relative;
width: 640px;
margin: 0px 15px 0px 80px;
background: #1a1a1a;
border-top: 1px solid #ccc;
padding-bottom:2em;
}

#bannerprimary {
float: left;
width: 300px;
margin: 0px 0px 0px 34px;
}

#bannerprimary h2 {
font-size: 36px;
color: #ffffff;
letter-spacing: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #ffffff;
}

#bannerprimary img {
float:left;
margin: 0px 15px 20px 0px;
}

#bannerprimary p {
font-size: 10px;
color: #ffffff;
}

#bannersecondary {
float: right;
position: relative;
width: 200px;
margin: 0px 34px 0px 5px;
}

#bannersecondary h2 {
font-size: 36px;
color: #ffffff;
letter-spacing: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #ffffff;
}

#bannersecondary p {
font-size: 10px;
color: #ffffff;
}

#container4 {
position: relative;
float: left;
width: 640px;
border-top: 3px solid #ccc;
margin: 0px 15px 0px 80px;
padding-bottom: 4em;
}

#primary {
float: left;
width: 300px;
margin: 0px 0px 0px 34px;
}

#primary h2 {
font-size: 36px;
color: #1e1e1e;
letter-spacing: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #1e1e1e;
}

#secondary {
float: right;
width: 200px;
margin: 0px 34px 0px 5px;
}

#secondary h2 {
font-size: 36px;
color: #1e1e1e;
letter-spacing: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #1e1e1e;
}

#secondary p {
font-size: 10px;
color: #1e1e1e;
}

#footer {
clear: both;
padding: 2em;
background-color: #e2e2e2;
font-size: 10px;
}

#footer ul {
overflow: hidden;
height: 12px
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 42px;
}

#footer ul li {
float: left;
line-height: 12px;
font-size: 10px;
}

#footer li a {
border-right: 1px solid #1e1e1e;
color: #1e1e1e;
padding: 0em 1.2em;
}

#footer li a.first {
padding: 0em;
}

#footer li a:hover {
color: #fff;
}

#footer p{
margin-top: 5px;
margin-left: 93px;
margin-bottom: 3em;
}
    Code (markup):
    I already upload it to silverosilver.com/test.html

    please help.
     
    wondercorn, Jan 8, 2009 IP
  2. yangyang

    yangyang Banned

    Messages:
    757
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #2
    yangyang, Jan 19, 2009 IP