Följande kod fungar jättebra i Explorer och resulterar i en drop-downmeny när musmarkören står över "Snabblänkar".
I Firefox blir det likadant, men när man försöker välja ett alternativ så har drop-down-listen redan försvunnit. Man hinner aldrig ställa sig över det alternativ man vill välja.
Hoppas att någon vänlig själ kan hjälpa mig finna problemet.
<td align="right" style="background-image:url(images/menu_bot_bg.gif); background-repeat:repeat-x" width="80">
<ul id="nav"><li> Snabblänkar » <ul>
<div style="margin-top:3px; margin-left:4px; margin-bottom:4px; margin-right:4px;">
<li><a href="content/travel/charter/index.php" target="content" id="ablack"> Charter</a></li>
<li><a href="content/travel/flight/index.php" target="content" id="ablack"> Flyg</a></li>
<li><a href="content/travel/car/index.php" target="content" id="ablack"> Hyrbil</a></li>
<li><a href="content/travel/apartments/index.php" target="content" id="ablack"> Boende & hotell</a></li>
<li> <a href="content/travel/cruise/index.php" target="content" id="ablack"> Kryssningar</a></li>
<li> <a href="content/travel/ferry/index.php" target="content" id="ablack"> Färjor</a></li>
<li><a href="content/travel/buss/index.php" target="content" id="ablack"> Buss</a><br>
<li><a href="content/travel/sport/index.php" target="content" id="ablack"> Golf & Sportresor</a></li>
<li><a href="content/travel/sweden/index.php" target="content" id="ablack"> Resa i Sverige</a></li>
<li><a href="content/travel/group/index.php" target="content" id="ablack"> Grupp & konferens</a></li>
<li> <a href="content/travel/wedding/index.php" target="content" id="ablack"> Bröllopsresor</a></li>
<li> <a href="content/travel/tours/index.php" target="content" id="ablack"> Specialresor </a></li>
<br><br></div></ul>
</li>
</ul>
</td>
InsiderMedlem sedan jan. 2000978 inlägg Jag tror ditt problem ligger i css-koden, så du får nog länka till sidan eller lägga upp all kod här.
En snabb lösning KAN vara att lägga till:
#nav {z-index:999;}
Du får inte ha samma id på flera element. Ändra id="ablack" till class="ablack". Och ändra detta i CSS: #ablack till .ablack
/r Vet inte om detta är anledningen till ditt problem, men det är ändå ett fel, och du bör fixa det hur som haver.
tydalMedlem sedan juni 20034 013 inlägg Kontrollera din kod här först. De brukar faktiskt hitta de flesta fel.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Hejsan!
Det verkar som om det är <iframe>:en nedanför drop-down-listen som ställer till det i Firefox. I Explorer fungerar koden som den ska. Någon som har någon idé hur man kommer runt det? Se kod nedan:
<html>
<head>
<title>Dropdown</title>
<style type="text/css">
body {
font-family: arial, helvetica, serif; font-size:11px;
}
a {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
;
font-weight: normal;
font-size: 11px;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
color:#ED1B23;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size: 11px;
font-weight: normal;
color: #000000;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #ED1B23;
text-decoration: none;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 10em;
text-align: left;
cursor: default;
/*background-color: #EFF0F3;*/
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
background-color: #EFF0F3;
border-bottom:1px solid #9E9FA3;
border-left:1px solid #9E9FA3;
border-right:1px solid #9E9FA3;
/*border: 1px solid #7d6340;
border-width: 1px 0;
margin-top:4px*/
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#content {
clear: left;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li> Våra resor
<ul><div style="margin-top:4px; margin-left:4px; margin-bottom:4px; margin-right:4px;">
<li><a href="#">Länk nummer 1</a></li>
<li><a href="#">Länk nummer 2</a></li>
<li><a href="#">Länk nummer 3</a></li>
<li><a href="#">Länk nummer 4</a></li>
<li><a href="#">Länk nummer 5</a></li>
<li><a href="#">Länk nummer 6</a></li>
<li><a href="#">Länk nummer 7</a></li>
<li><a href="#">Länk nummer 8</a></li>
<li><a href="#">Länk nummer 9</a></li>
</div></ul>
</li>
</ul>
</td></tr>
<tr><td>
<iframe src="" width="550" height="400">
</iframe>
</td>
</tr>
</table>
</body>
</html>
tydalMedlem sedan juni 20034 013 inlägg Om du kontrollerar koden via länken jag gav ovanför så ser du att du har placerat <div> och <ul> i fel ordning. Det ska vara <div> först och <ul> sen, samt motsvarande på slutet (</ul> först och </div> sen).
Jag ser ingen skillnad mellan IE och Firefox.
tydalMedlem sedan juni 20034 013 inlägg Aha, det var javaskriptet du tänkte på, att den försvinner över iframen... Ja, det stämmer, det gör den i Firefox... Hmm...
kolasMedlem sedan mars 2001142 inlägg Nino82Medlem sedan juli 20035 inlägg Test att sätt position: fixed; på <ul id="nav">
