Drop down lists, no idea how todo them.

oliver111

09-12-2007, 01:00 AM

Hi i have problems doing drop down lists, i want it to be a horizonal hover drop down. It isn't working not matter what i do. Heres some of the code:

Html:
<div id="nav">
<ul>
<li id="active"><a href="#">Home</a></li>
<li><a href="#">Travels</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">MBup</a></li>
<li><a href="#">Flash Games</a></li>
</ul>
</div>
</div>

CSS:
#nav {
margin:20px auto;
float: left;
}

#nav ul {
list-style-type:none;
margin: 0;
padding: 0;
}

#nav a {
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;

}

#nav a:hover
{
background-color: #369;
color: #FFF;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;

}

#active a
{
display: block;
color: #FFF;
background-color: #600;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#nav li { margin: 0 0 .2em 0; }

VIPStephan

09-12-2007, 01:05 AM

How about all of the code? I’s not comprehensible how you wanna get a drop down menu with only one level of links?

Try the Son of the Suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/) menu.

oliver111

09-12-2007, 01:08 AM

body {
font-family:Arial, Helvetica, sans-serif;
margin:0 auto;
text-align:center;
background-image:url(images/water.jpg);
color:#FFFFFF;
}

#content {
margin:0 auto;
text-align:center;
width:1000px;
height:800px;
}

#nav {
margin:20px auto;
float: left;
}

#nav ul {
list-style-type:none;
margin: 0;
padding: 0;
}

#nav a {
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;

}

#nav a:hover
{
background-color: #369;
color: #FFF;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;

}

#active a
{
display: block;
color: #FFF;
background-color: #600;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#nav li { margin: 0 0 .2em 0; }

#header {

}

a {text-decoration:none; color:#FFFFFF;}

and HTML
<body>
<div id="content">
<div id="header"><img src="images/header.png"></div>
<a href="http://olidixon.com">www.OliDixon.com</a>

<div id="nav">
<ul>
<li id="active"><a href="#">Home</a></li>
<li><a href="#">Travels</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">MBup</a></li>
<li><a href="#">Flash Games</a></li>
</ul>
</div>
</div>

</body>
</html>

twodayslate

09-12-2007, 02:18 AM

Please use the code tags when posting code

CSSplay.co.uk is a great resource.