...

View Full Version : Horizontal drop down menu - CSS problem



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

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...

http://www.dekersenkraam.nl/new/index.html

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">
<head>
<link href="style - kopie2_2.css" rel="stylesheet" type="text/css" />
<title>Kersenboomgaard Rhijnestein</title>
</head>
<body>
<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>
<ul>
<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>
</ul>
</li>
<li><a href="../kraam.html"><b>De kraam</b></a></li>
<li><a href="../fotos.html"><b>Foto's</b></a>
<ul>
<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>
</ul>
</li>
<li><a href="../contact.html"><b>Contact</b></a></li>
<li><a href="../gastenboek.html"><b>Gastenboek</b></a></li>
</ul>
</body>
</html>

and this the incomplete CSS:

body {
background-color:#a6bf79;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 10px 10px;
padding: 0px;
}
.clear{clear:both;}
* {
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
text-align: left;
width: 717px;
}
a{
font-size: 12px;
}
p{
margin: 15px 0px;
}
#header {
margin: 0px 0px 0px 0px;
background-image:url(images/header.jpg);
width:717px;
height:288px;
position:relative;
}
#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,

Anneke

Excavator
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