View Full Version : Horizontal drop down menu - CSS problem

Anneke vD
04-21-2011, 10:42 PM

I hope someone is willing to help me with a CSS problem I have with a horizontal drop down menu. I'm new in this and can need some help!

The following link shows how I would like to have it. However, this only works in firefox and the CSS is a mess...


In short, this is the my HTML:

<!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">
<link href="style - kopie2_2.css" rel="stylesheet" type="text/css" />
<title>Kersenboomgaard Rhijnestein</title>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="../index.html"><b>Home</b></a></li>
<li><a href="../index.html"><b>De boomgaard</b></a>
<li><a href="../boomgaard/geschiedenis.html">Toen en nu</a></li>
<li><a href="../boomgaard/kersensoorten.html">Kersensoorten</a></li>
<li><a href="../boomgaard/omgeving.html">Omgeving</a></li>
<li><a href="../boomgaard/terechtanders.html">Terecht Anders</a></li>
<li><a href="../kraam.html"><b>De kraam</b></a></li>
<li><a href="../fotos.html"><b>Foto's</b></a>
<li><a href="../fotos/oudedoos.html">Oude doos</a></li>
<li><a href="../fotos/seizoenen.html">Seizoenen</a></li>
<li><a href="../fotos/kersenkraam.html">Kersenkraam</a></li>
<li><a href="../contact.html"><b>Contact</b></a></li>
<li><a href="../gastenboek.html"><b>Gastenboek</b></a></li>

and this the incomplete CSS:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 10px 10px;
padding: 0px;
* {
margin: 0px;
padding: 0px;
#container {
margin: 0px auto;
text-align: left;
width: 717px;
font-size: 12px;
margin: 15px 0px;
#header {
margin: 0px 0px 0px 0px;
#nav, #nav ul {
padding: 5px 0 0 0;
margin: 0;
list-style: none;

Can someone please help me with the right CSS, which is working in both Firefox and Explorer?

Thanks in advance,


04-21-2011, 11:20 PM
Hello Anneke vD,
<li2> is kind of an odd thing to see. It is also invalid.
If you need to style that li differently than the other li's you can give it a class or an id.

Check you code with the validator - see the link about validation in my signature line below.


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum