...

View Full Version : simple css drop menu not working



anthias
11-14-2008, 01:31 AM
At the suggestion of some here, I've re-written my page so it uses the cleanest html and css I can. I'm having trouble with the css dropdowns though. The tabs change color, but nothing drops down. It's placing the text I want in the dropdown next to the title tab. gingertown.org if you want to look at it there.

HTML:


<html>

<head>

<style type="text/css"></style>

<link rel="stylesheet" media="all" type="text/css" href="css/gingertown3.css"/>


</head>

<body>

<div id="wrapper">

<div id="header">

<a href="http://www.dmsas.com"><img src="images/gingertown09f_7.jpg" align="left" border="none" alt="DMSAS - GINGERTOWN"/></a>

</div>

<div id="navbar">

<ul>
<li class="top">GINGERTOWN 2008</li>
<li class="item"><a href="#">GINGERTOWN 2008</a></li>
</ul>

</div>




<div id="main">
main
</div>


<div id="footer">
<p> David M. Schwarz Architects, Inc.</p>
</div>


</div>

</body>

</html>


CSS:

body {
font-family:verdana, arial, helvetica, sans-serif;
font-size:76%;
color:white;
padding:0;
border:0;
margin:0;
background:black;
}

a {
color:white;
}

a:visited {
color:white;
}

a:active {
color:white;
}

a:hover {
text-decoration:none;
}

#wrapper {
width:1000px;
margin:14px 0px 0px 0px;
}

#header {
width:1000px;
height:80px;
float:left;
}

#navbar {
clear:both;
width:1000px;
height:20px;
background:red;
color:white;
font-size:11px;
}

#navbar ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 10px;
}

#navbar li {
margin:7px 10px 0px 0px;
list-style-type: none;
list-style:none;
display:block;
float:left;
width:140px;
border-right:1px solid #fff;
}

#navbar li:hover {
margin:7px 10px 0px 0px;
list-style-type: none;
display:block;
float:left;
width:140px;
border-right:1px solid #fff;
background:black;
}

#navbar li .item{display:none;}

#navbar li:hover .item a {
color:purple;
text-decoration:none;
}

#navbar li:hover .item a:hover {
color:orange;
}

#main {
background:blue;
height:650px;
width:750px;
float:left;
position: relative; top: 20px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 20px 10px;
}

#footer {
clear:both;
width:1000px;
height:20px;
background:red;
color:white;
font-size:11px;
position: relative; top: 20px;
}

#footer p {
margin:6px 0px 0px 10px;
float:left;
}

twodayslate
11-14-2008, 01:33 AM
cssplay.co.uk
http://www.htmldog.com/articles/suckerfish/dropdowns/

anthias
11-14-2008, 01:52 AM
Thanks. I've been using both of those and a couple more. It looks like I have everything from their pages. The problem is that I can't find what I'm missing.

twodayslate
11-14-2008, 04:34 AM
What are you supposed to see in the dropdown menu when there are no sublinks?

anthias
11-14-2008, 04:46 AM
<li class="top">GINGERTOWN 2008</li>
<li class="item"><a href="#">GINGERTOWN 2008</a></li>

I thought that's what these lines were doing? The top should be what stays visible and the item should be in the drop menu.

effpeetee
11-14-2008, 11:35 AM
The css should be in the order -
Link

Visited

Hover

Active.

==============

see here for info (http://www.yourhtmlsource.com/stylesheets/csslinks.html#CSSCODE)


Frank

twodayslate
11-15-2008, 12:18 AM
perhaps this simple bit of code will make this click for you

css:
span { display: none;}
a:hover span { display: block; }

html:
<a href="#" title="link">Link<span>Description</span></a>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum