Reputation: 11
I found this CSS code for an horizontal dropdown menu over the internet which at first seems really good (the results on chrome are perfect). However, when I try it with internet explorer, white spaces appear between the dropdown elements and I cannot navigate the menu.
Have any idea? Your help would be greatly appreciated.
HTML :
<div id="menu">
<ul>
<li><a href="accueil.htm">Accueil</a></li>
<li><a href="cv/Cvfrdept.pdf">CV</a></li>
<li><a href="accueil.htm">Enseignement</a>
<ul>
<li><a href="plans.htm">Plans de cours</a></li>
<li><a href="lecons.htm">Leçons</a></li>
<li><a href="ppt.htm">Powerpoints </a></li>
</ul>
</li>
<li><a href="recherche.htm">Recherche</a>
<ul>
<li><a href="italia.htm">Italia</a></li>
<li><a href="livres.htm">Livres</a></li>
</ul>
</li>
<li><a href="liens.htm">Liens</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="home.htm">English</a></li>
</ul>
</div>
And the CSS :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul a:hover {
color: #ffffff;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
Upvotes: 1
Views: 1293
Reputation: 11
Are you missing some code from your examples or is this the exact code, because I think you'r missing the close
</ul>
?
Upvotes: 1