Dynamische Navi soll nach oben aufklappen

[acapella]

Dynamische Navi - IE vs. Firefox

Hallo Leute,

ich habe zwei kleine Probleme mit einer selbstgestrickten dynamischen Navigation, bei denen ich nicht weiter komme. Zum einen soll das Menü nach oben aufklappen anstatt nach unten. Zum anderen funktioniert das automatische Ausklappen nur im IE und nicht im FF, Opera und ähnlichem.

Wäre nett, wenn mir mit den Problemen jemand helfen könnte.

Hier ist der bisher erstellte Code:

#mainmenu {
clear: left;
float: left;
width: 750px;
height: 20px;
}
#mainmenu ul {
padding:0;
margin:0;
border:0;
list-style-type:none;
overflow:hidden;
background:transparent;
width:100%;
text-align:left;
color: #fff; 
}
#mainmenu ul div {
border-collapse:collapse;
padding:0;
margin:0;
font-size:1.5em; 
}
#mainmenu ul li {
float:left;
position:relative;
}
#mainmenu ul li.drop {
margin-bottom:-2px;
}
#mainmenu ul li a, #mainmenu ul li a:visited {
display:block;
width:12em;
line-height:2em;
text-decoration:none;
color:#fff;
background:#242424;
padding-left:0.5em;
}
#mainmenu ul li a.last, #mainmenu ul li a.last:visited {
display:block;
width:12.6em;
line-height:2em;
}
#mainmenu ul li ul {
display:none;
position: absolute;
}
#mainmenu ul li:hover a, #mainmenu ul li a:hover {
color:#FF9900;
border-bottom: 1px solid #151515;
}
#mainmenu ul li:hover ul, #mainmenu ul li a:hover ul { 
display:block; 
width:12.6em; 
background:#242424; 
}
#mainmenu ul li:hover ul li a, #mainmenu ul li a:hover ul li a {
background:#242424;
color: #fff;
}
#mainmenu ul li:hover ul li:hover a, #mainmenu ul li a:hover ul li a:hover {
background:#242424;
color:#FF9900;
}

Ach ja, kann man eigentlich mittlerweile Hintergrundfarben halbtransparent anzeigen lassen? Wenn nein, gibt es ja nur den Umweg über png oder gif, oder? Es würde sich nämlich anbieten, da das Menü ins Foto darüber reinklappt und dieses somit verdeckt.

 

[acapella]

OK, das mit dem nach oben aufklappen hat sich erledigt. Habe eine Lösung gefunden.:idea:

#mainmenu ul li ul {
display:none;
position: absolute;
bottom: 2.1em;
}

Für das FF-Problem hätte ich gerne ne Lösung. Weiß niemand, was da falsch läuft?:?:

 

[neuroleptika]

Ein Grund wird hier liegen:

#mainmenu ul {
overflow:hidden;
...
}

Has du eine Liste innerhalb von a geschrieben?

#mainmenu ul li a:hover ul

Sowas kann es nicht geben.

Zeige es mal online.

 

[acapella]

Wow, "overflow:hidden;" das wars. Aber warum? Ich hatte das menü schon mal im blockformat im einsatz und da hat es einwandfrei in jedem browser funktioniert. Ich bin mir aber nicht ganz sicher, ob der Rest passt.

Online zeigen? Warum das? Ich schicke dir ne Nachricht ...

 

[Efchen]

Online zeigen? Warum das?

Weil man da Fehlverhalten besser analysieren kann. Web-Developer-Tools funktionieren halt nur mit echten Websites.

 

[acapella]

Hier ist der Ausschnitt im HTML-Bereich. Ich verwende Joomla! zum Aufbau der Seite.

<div id="mainmenu">
<div class="moduletable_menu">
 <ul class="menu">
  <li id="current" class="active item1">
   <a href="http://localhost/">
    <span>...</span>
   </a>
  </li>
 <li class="item27">
  <a href="/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=27">
   <span>...</span>
  </a>
 </li>
 <li class="parent item50">
  <a href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=1&amp;Itemid=50">
   <span>...</span>
  </a>
  <ul>
   <li class="item41">
    <a href="/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=41">
     <span>...</span>
    </a>
   </li>
   <li class="item49">
    <a href="/index.php?option=com_newsfeeds&amp;view=categories&amp;Itemid=49">
     <span>...</span>
    </a>
   </li>
   <li class="item37">
    <a href="/index.php?option=com_content&amp;view=section&amp;id=4&amp;Itemid=37">
     <span>...</span>
    </a>
   </li>
   <li class="item53">
    <a href="/index.php?option=com_content&amp;view=section&amp;id=4&amp;Itemid=53">
     <span>...</span>
    </a>
   </li>
   <li class="item2">
    <a href="/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=2">
     <span>...</span>
    </a>
   </li>
   <li class="item34">
    <a href="/index.php?option=com_content&amp;view=article&amp;id=39&amp;Itemid=34">
     <span>...</span>
    </a>
   </li>
  </ul>
 </li>
 <li class="item48">
  <a href="/index.php?option=com_weblinks&amp;view=categories&amp;Itemid=48">
   <span>...</span>
  </a>
 </li>
</ul>
</div>
</div>

Ich glaub die Angaben für span fehlen bei meinem CSS bzw. ich hab sie anders bezeichnet.

 

[neuroleptika]

Wow, "overflow:hidden;" das wars. Aber warum?

overflow: hidden;
Der Wert ist in diesem Fall doch selbsterklärend.

Dein online-Beispiel wollte ich sehen weil ich ein kaputtes html vermutet habe (a:hover ul).
Deine Liste ist aber I.O.
Mit a:hover ul erreicht du allerdings nichts weil es keine ul in a gibt.

Ohne online-Beispiel müssten wir selber eine Testseite zusammenbauen.
Doctype, css-reset usw. müßten wir uns ausdenken.
Es entpricht dann nicht unbedingt deiner echten Seite.

Eine Nachricht habe ich nicht bekommen.
Ich denke sowas sollte ohnehin für alle nachvollziehbar bleiben.