/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
HTML liste menu virker ikke i Internet Exp~
Fra : Preben Nielsen


Dato : 22-11-10 09:08

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 liste
menu, 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 3. 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;
}

 
 
Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste