Toon posts:

css menu werkt in ff niet in IE 7

Pagina: 1
Acties:

Verwijderd

Topicstarter
onderstaand css menu met uitschuif submenu werkt wel FF maar niet in IE7 :( weet iemand de oplossing???
CSS
div#menubalk{
background-color:#483d8b;
color:#fff;
font-family:Arial, sans-serif;
font-size:75%;
font-weight:bold;
}
div#menubalk a{
background:inherit;
color:#fff;
display:block;
padding:2px 6px;
text-decoration:none;
}
div#menubalk a:hover{
background-color:#7b68ee;
color:#fff;
}
div#menubalk ul{
list-style-type:none;
margin:0;
padding:0;
}
div#menubalk li{
background-color:#483d8b;
color:#fff;
float:left;
min-width:7em;
}
div#menubalk ul li ul{
display:none;
}
div#menubalk ul li ul li{
float:none;
}
div#menubalk ul li:hover ul{
display:block;
}
HTML
<div id="menubalk">
<ul>
<li><a href="http://www.websonic.nl">Menu-item</a></li>
<li><a href="http://www.websonic.nl">Menu-item</a>
<ul>
<li><a href="http://www.websonic.nl">Menu-subitem</a></li>
<li><a href="http://www.websonic.nl">Menu-subitem</a></li>
<li><a href="http://www.websonic.nl">Menu-subitem</a></li>
<li><a href="http://www.websonic.nl">Menu-subitem</a></li>
<li><a href="http://www.websonic.nl">Menu-subitem</a></li>
</ul>
</li>
<li><a href="http://www.websonic.nl">Menu-item</a></li>
<li><a href="http://www.websonic.nl">Menu-item</a></li>
</ul>
</div>

  • SpamLame
  • Registratie: Augustus 2000
  • Laatst online: 19:44

SpamLame

niks

Zet er dan iig code tags omheen voor de leesbaarheid en heb je ergens een live voorbeeld?

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
div#menubalk{
background-color:#483d8b;
color:#fff;
font-family:Arial, sans-serif;
font-size:75%;
font-weight:bold;
}
div#menubalk a{
background:inherit;
color:#fff;
display:block;
padding:2px 6px;
text-decoration:none;
}
div#menubalk a:hover{
background-color:#7b68ee;
color:#fff;
}
div#menubalk ul{
list-style-type:none;
margin:0;
padding:0;
}
div#menubalk li{
background-color:#483d8b;
color:#fff;
float:left;
min-width:7em;
}
div#menubalk ul li ul{
display:none;
}
div#menubalk ul li ul li{
float:none;
}
div#menubalk ul li:hover ul{
display:block;
}



HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="menubalk">
<ul>
<li><a href="http://www.websonic.nl">Menu-item</a></li>
<li><a href="http://www.websonic.nl">Menu-item</a>
    <ul>
    <li><a href="http://www.websonic.nl">Menu-subitem</a></li>
    <li><a href="http://www.websonic.nl">Menu-subitem</a></li>
    <li><a href="http://www.websonic.nl">Menu-subitem</a></li>
    <li><a href="http://www.websonic.nl">Menu-subitem</a></li>
    <li><a href="http://www.websonic.nl">Menu-subitem</a></li>
    </ul>
</li>
<li><a href="http://www.websonic.nl">Menu-item</a></li>
<li><a href="http://www.websonic.nl">Menu-item</a></li>
</ul>
</div>

Verwijderd

Ff een testje gedaan en idd, precies wat ik dacht, IE7 ondersteunt blijkbaar geen hover op li elementen, gaat dus niet werken in IE7. Een mogelijk oplossing zou javascript kunnen zijn.

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:27

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 10 juli 2007 @ 10:15:
Ff een testje gedaan en idd, precies wat ik dacht, IE7 ondersteunt blijkbaar geen hover op li elementen, gaat dus niet werken in IE7. Een mogelijk oplossing zou javascript kunnen zijn.
In standards compliant mode ondersteund IE7 wel degelijk :hover op alle elementen.

Waarschijnlijk heeft topicstarter een document in quirksmode :)

Intentionally left blank