I forbindelse med det test-design, som jeg forhører mig mere bredt om
i en anden tråd, har jeg nu et specifikt problem med en html
listemenu, som jeg prøver at lave: Den virker i Firefox og Internet
Explorer 8, men ikke i Internet Explorer 7 (og sikkert heller ikke i
tidligere IE versioner).
Kan ses her:
http://vinsiderne.dk/test4/startside3a.htm
Problemet er, at når jeg fører musen et stykke ud til højre, så
klapper menuen sammen. Det ses tydeligst ved at gå til højre fra
"Videre B" eller nedad fra "Videre B1" i menuens 2. niveau.
Både HTML og CSS er valideret, så der skulle ikke være noget der.
Er der nogen løsning på det problem?
(Se venligst bort fra farver osv - de er kun så jeg kan se, hvad jeg
har gang i.)
HTML:
<div id="menu">
<ul class="niveau1">
<li><a href="blabla.htm">1. niveau A</a></li>
<li><a href="blabla.htm">1. niveau B</a></li>
<li class="sub">Videre A
<ul class="niveau2">
<li><a href="blabla.htm">2. niveau A</a></li>
<li><a href="blabla.htm">2. niveau B</a></li>
</ul>
</li>
<li class="sub">Videre B
<ul class="niveau2">
<li class="sub">Videre B1
<ul class="niveau3">
<li><a href="blabla.htm">3. niveau A</a></li>
<li><a href="blabla.htm">3. niveau B</a></li>
</ul>
</li>
<li><a href="blabla.htm">2. niveau A</a></li>
<li><a href="blabla.htm">3. niveau B</a></li>
</ul>
</li>
</ul>
</div>
CSS:
#menu
{
margin-top: 10px;
font-size: 12px;
}
div#menu ul
{
margin: 0 0 0 0;
padding: 0;
width: 135px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: blue;
}
div#menu li
{
padding: 0.25em 0 0.25em 0.5em; /* padding omkring tekster i
menupunkter */
position: relative; /* skulle gøre det muligt at positionerer ul'er
absolut inden i li'en */
list-style: none; /* ingen punkttegn */
margin: 0;
border-bottom: 1px solid blue; /* border under menupunkterne og
dermed også hele menuen */
background: rgb(135,135,135); /* Menuens farve */
color: white; /* Tekstens farve */
}
div#menu li:hover
{
background: rgb(120,140,190);
}
div#menu li.sub
{
background-image: url(pil.png);
background-position: right center;
background-repeat: no-repeat;
}
div#menu li a
{
display: block;
text-decoration: none;
color: white;
}
div#menu li a:hover
{
display: block;
text-decoration: none;
width: 120px;
color: red;
}
div#menu ul ul
{
position: absolute;
top: -1px;
left: 135px;
display: none;
}
div#menu ul.niveau1 li.sub:hover ul.niveau2, div#menu ul.niveau2
li.sub:hover ul.niveau3
{
display: block;
}