Ok, so I have looked at a 100 examples online today for css drop down. changing them all the my classes/id’s and it never works. I have applied the simplest parts of the drop down css to my code. Can anyone tell me what i need to add? It won’t even display when i hover
HTML:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<div id="logo">
<img src=".png" width="600" height="82" ><a href=""></a>
</div>
<div id="surround">[B]
<div id="nav">
<ul>
<li><a href="">button</a></li>
<ul>
<li><a href="">sub-button</a></li>
<li><a href="">sub-button</a></li>
</ul>
<li><a href="">button</a></li>
<li><a href="">button</a></li>
<li><a href="">button</a></li>
</ul>
</div>[/B]
</div>
</div><!-- end of content" div -->
<div id="footer-wrap">
<div id="footer">
<p>content</p>
<p>content</p>
<p>content</p>
</div> <!-- end of "footer" div -->
</div><!-- end of "footer-wrap" div -->
</body>
</html>
CSS:
body {
background: #fff;
}
#content {
width: 970px;
margin: auto;
padding: 0px 10px 10px 10px;
position: relative;
top: -8px;
background: #fff;
min-height: 580px;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
#logo {
margin: 0px 0px 0px 10px;
}
#nav {
float: right;
display: block;
margin: -16px 0 0 0;
}
#nav li {
list-style-type: none;
display: inline;
float: right;
font-size: 16px;
position: relative;
top: -84px;
right: 7px;
}
#nav a {
text-decoration: none;
color: #000;
font-family: Trebuchet MS, sans-serif;
font-weight: bold;
padding: 8px 13px 8px 13px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
margin: 5px;
}
#nav a:link, a:visited {
color: #000;
-webkit-transition: color .25s linear .05s;
transition: color .25s linear .05s;
}
#nav a:hover {
color: #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
border-top: 6px solid #000;
margin: 5px;
background: #000;
}
/*my basic drop down code that needs help */
[B] #nav ul ul {
display: none;
}
#nav ul ul:hover {
display: block;
}
[/B]
#footer-wrap {
background: #fff;
height: 150px;
border-top: 2px solid #000;
margin: 0;
padding: 0;
}
#footer {
width: 970px;
margin: auto;
padding: 10px;
}
#footer p {
color: #000;
}