menu déroulant CSS problème mineur

Question

Je suis tout nouveau à CSS et je fais mon propre site Web pour l'apprendre. Cela fait 2 jours que j'essaie de nombreuses suggestions mais j'avoue que je suis coincé. Le problème est que j'ai un menu avec 4 éléments. Le 2ème élément devrait être un menu déroulant en stationnaire. Lorsque je passe la souris, les éléments déroulants apparaissent sous le troisième élément de menu. Je ne sais pas si c'est le CSS ou html/Peut-être un expert peut résoudre ce 1 minute? Le code incriminé est ci-dessous

HTML 
<div id="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Products</a> 
    <ul> 
    <li><a href"#">Product 1</a></li> 
    <li><a href"#">Product 2</a></li> 
    </ul> 
    </li> 
    <li><a href="#">About</a> 
    <li><a href="#">Contact</a> 
</ul> 
</div> 
<!-- end div#menu --> 

Et le CSS

/* Menu */ 

#menu { 
width: 940px; 
height: 47px; 
margin: 0 auto; 
background: url(images/img02.jpg) repeat-x left top; 
} 

#menu ul { 
margin: 0; 
padding: 0; 
list-style: none; 
line-height: normal; 
margin-left: 0px; 
} 

#menu li { 
display: inline; 
text-align: center; 
position:relative; 
} 

#menu a { 
display: block; 
float: left; 
width: 100px; 
height: 32px; 
margin-right: 2px; 
padding: 15px 20px 0px 20px; 
text-decoration: none; 
text-align: center; 
text-transform: uppercase; 
font-size: 12px; 
font-weight: bold; 
color: #3CF; 
} 

#menu a:hover, #menu .active a { 
background: #000000; 
color: #FFFFFF; 


} 

#menu ul ul { 
position:absolute; 
visibility:hidden; 
top:30px; 
left: 100%; 
width: 100%; 

} 

#menu ul li a { 

text-align:center; 

} 

#menu ul li:hover ul { 
display:block; 
position:absolute; 
visibility:visible; 
position:absolute; 
background: #000000; 
color: #FFFFFF; 


} 

Merci à tous ceux qui veulent me aider!

[MISE À JOUR]

Merci les gars. Les deux exemples fournis ont fonctionné. Si l'un d'entre vous peut me pointer dans la bonne direction en gardant le prochain élément div en place (les deux exemples l'ont descendu vers le bas) alors je peux heureusement être sur mon chemin. thx!

Answer 1

Utilisation float:left au lieu de display:inline pour votre LI

dans #menu ul ul

Utilisez left:0

... et tout ira bien.

Answer 2

travail un: http://jsfiddle.net/XbHxL/

J'ai fait quelques changements, la plupart du temps avec des positions, affichage, etc. flotter

Answer 3

je moqué un exemple simplifié sur jsFiddle pour démontrer ...

http://jsfiddle.net/Sohnee/HYNxd/2/

Voici le code.

HTML

S'il vous plaît noter que vous avez manqué quelques balises de fermeture, et aussi quelques signes = dans vos points d'ancrage.

<div id="menu"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a> 
      <ul> 
       <li><a href="#">Product 1</a></li> 
       <li><a href="#">Product 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

CSS

#menu ul li { 
    display: block; 
    float: left; 
} 

#menu ul li ul { 
    display: none; 
    position: absolute; 
} 

#menu ul li ul li { 
    display: block; 
    float: none; 
} 

#menu ul li:hover ul { 
    display: block; 
} 

#menu a { 
    display: block; 
    padding: 0.4em 1.2em; 
    text-decoration: none; 
    color: #3CF; 
    text-align: center; 
    text-transform: uppercase; 
    font-size: 12px; 
    font-weight: bold; 
} 

#menu a:hover { 
    color: White; 
    background-color: #3CF; 
}