CSS Forum

**boxiom** · 06-26-2009, 03:48 PM

I have my site coded, and I want to turn my NAVBAR with all the links, into a dropdown. So when I hover over "Page 1" a drop down comes down with more links.

http://i41.tinypic.com/aem7tw.jpg

Attatched is the HTML and CSS.

CSS:

Code:

body,td,th {
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
}
body {
    background-color: #202020;
}
.upper a:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    text-decoration: none;
    color:#FFFFFF;
}
.upper a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    text-decoration: none;
    color:#FFFFFF;
}
.upper a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    text-decoration: none;
    color:#FFFFFF;
    text-decoration: underline;
}
.upper a:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    text-decoration: none;
    color:#FFFFFF;
}
h1 {color: #0a6a9a}
.posted_on {color: #222224}
a {
    font-size: 12px;
    color: #FFFFFF;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #0A6A9A;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}

HTML:

Code:

<!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>Footfive Designs</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="900" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="42" colspan="3" background="images/upper_bg.gif"><table width="100%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="76%" class="upper"><a href="#">home</a> <a href="#">forum</a> <a href="#">contact me</a> <a href="#">services</a></td>
        <td width="24%" align="right" class="upper"><a href="#">Advertising Link</a> | <a href="#">Advertising Link</a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="154" colspan="3"><img src="images/logo.gif" width="900" height="154" /></td>
  </tr>
  <tr>
    <td height="39" colspan="3" background="images/nav_bg.gif">
    <table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="5">
      <tr>
        <td align="center"><a href="#">Home</a></td>
        <td align="center"><a href="#">Forum</a></td>
        <td align="center"><a href="#">Tutorials</a></td>
        <td align="center"><a href="#">Articles</a></td>
        <td align="center"><a href="#">Resources</a></td>
        <td align="center"><a href="#">Services</a></td>
        <td align="center"><a href="#">For Sale</a></td>
        <td align="center"><a href="#">Page 8</a></td>
        <td align="center"><a href="#">Page 9</a></td>
        <td align="center"><a href="#">Page 10</a></td>
        <td align="center"><a href="#">Page 11</a></td>
        <td align="center"><a href="#">Page 12</a></td>
        <td align="center"><a href="#">Page 13</a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="37" colspan="3" align="center"><span class="advertising_links"><a href="#">Advertising Link</a> | <a href="#">Advertising Link</a> | <a href="#">Advertising Link</a></span></td>
  </tr>
  <tr>
    <td width="3" height="191"><img src="images/content_left.gif" width="3" height="191" /></td>
    <td width="892" valign="top" background="images/content_bg.gif"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="10">
      <tr>
        <td width="77%"><h1>Page Title</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut tellus odio, vel malesuada tortor. Sed vulputate suscipit dui sit amet semper. Maecenas nibh est, auctor eget pretium non, volutpat vel tellus. Vestibulum faucibus tristique tellus quis gravida. Sed iaculis, massa in posuere vulputate, nunc elit egestas urna, sed volutpat diam ipsum vitae augue. Proin erat sapien, varius vel venenatis eget, ultrices feugiat nibh. In facilisis nibh vel nisl rhoncus vitae sodales odio ornare. Duis sit amet felis ligula. Fusce nec feugiat orci. Vestibulum consectetur lobortis mauris vel hendrerit. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></td>
        <td width="23%"><img src="images/post_image.gif" width="194" height="173" /></td>
      </tr>
    </table></td>
    <td width="5"><img src="images/content_right.gif" width="3" height="191" /></td>
  </tr>
  <tr>
    <td height="41"><img src="images/content_footer_left.gif" width="3" height="41" /></td>
    <td height="41" background="images/content_footer.gif"><span class="posted_on">Posted on 6/22/2009 at 10:34 PM (EST US)</span></td>
    <td height="41"><img src="images/content_footer_right.gif" width="3" height="41" /></td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
    <tr>
    <td width="3" height="191"><img src="images/content_left.gif" width="3" height="191" /></td>
    <td width="892" valign="top" background="images/content_bg.gif"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="10">
      <tr>
        <td width="77%"><h1>Page Title</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut tellus odio, vel malesuada tortor. Sed vulputate suscipit dui sit amet semper. Maecenas nibh est, auctor eget pretium non, volutpat vel tellus. Vestibulum faucibus tristique tellus quis gravida. Sed iaculis, massa in posuere vulputate, nunc elit egestas urna, sed volutpat diam ipsum vitae augue. Proin erat sapien, varius vel venenatis eget, ultrices feugiat nibh. In facilisis nibh vel nisl rhoncus vitae sodales odio ornare. Duis sit amet felis ligula. Fusce nec feugiat orci. Vestibulum consectetur lobortis mauris vel hendrerit. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></td>
        <td width="23%"><img src="images/post_image.gif" width="194" height="173" /></td>
      </tr>
    </table></td>
    <td width="5"><img src="images/content_right.gif" width="3" height="191" /></td>
  </tr>
  <tr>
    <td height="41"><img src="images/content_footer_left.gif" width="3" height="41" /></td>
    <td height="41" background="images/content_footer.gif"><span class="posted_on">Posted on 6/22/2009 at 10:34 PM (EST US)</span></td>
    <td height="41"><img src="images/content_footer_right.gif" width="3" height="41" /></td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
    <tr>
    <td width="3" height="191"><img src="images/content_left.gif" width="3" height="191" /></td>
    <td width="892" valign="top" background="images/content_bg.gif"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="10">
      <tr>
        <td width="77%"><h1>Page Title</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut tellus odio, vel malesuada tortor. Sed vulputate suscipit dui sit amet semper. Maecenas nibh est, auctor eget pretium non, volutpat vel tellus. Vestibulum faucibus tristique tellus quis gravida. Sed iaculis, massa in posuere vulputate, nunc elit egestas urna, sed volutpat diam ipsum vitae augue. Proin erat sapien, varius vel venenatis eget, ultrices feugiat nibh. In facilisis nibh vel nisl rhoncus vitae sodales odio ornare. Duis sit amet felis ligula. Fusce nec feugiat orci. Vestibulum consectetur lobortis mauris vel hendrerit. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></td>
        <td width="23%"><img src="images/post_image.gif" width="194" height="173" /></td>
      </tr>
    </table></td>
    <td width="5"><img src="images/content_right.gif" width="3" height="191" /></td>
  </tr>
  <tr>
    <td height="41"><img src="images/content_footer_left.gif" width="3" height="41" /></td>
    <td height="41" background="images/content_footer.gif"><span class="posted_on">Posted on 6/22/2009 at 10:34 PM (EST US)</span></td>
    <td height="41"><img src="images/content_footer_right.gif" width="3" height="41" /></td>
  </tr>
  <tr>
    <td height="30" colspan="3" align="right"><table width="100%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td align="right">1 | <a href="#">2</a> | <a href="#">3</a> | <a href="#">4</a> | <a href="#">Older</a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="50" colspan="3" align="center">Copyright 2009 - Footfivedesigns.com<br />
      Coded by Unlucky4Ever at <a href="http://www.treetop-studios.com">Treetop-Studios.com</a></td>
  </tr>
</table>
</body>
</html>

**LadynRed** · 06-26-2009, 04:22 PM

http://htmldog.com/articles/suckerfish/dropdowns/

"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Chinese proverb - Lao Tzu

**GaLaZ** · 06-26-2009, 04:46 PM

why use Java Script:

http://www.jankoatwarpspeed.com/post...-CSS-only.aspx

try this

**GeekSpecialties** · 06-26-2009, 06:56 PM

I agree, I'm not a fan of using java for simple menus. It would probably be easier for you to implement but you can learn a lot about CSS creating menus.

Here are several CSS only examples.
http://www.cssplay.co.uk/menus/

**LadynRed** · 06-26-2009, 07:54 PM

You obviously didn't read the Son of Suckerfish article, it ONLY uses JS for the :hover pseudo-class to work in IE6 ! Doesn't matter what scripting you use to force IE6 to hover on something besides the <a> tag, whether it's that script or whatever:hover - but for IE6 you still need SOME scripting.

The rest of that menu uses CSS ONLY and works fine w/o scripting in all GOOD browsers!

**trevor shaw** · 06-27-2009, 08:45 AM

Here's an article on navigation using CSS, including drop down menus it's fairly long at 5 pages but I think it's clear and good

http://www.sitepoint.com/article/navigation-using-css/

Hope this helps

**boxiom** · 06-28-2009, 09:43 AM

Thanks all, got it figured out