|
|||
CSS Dropdown Navi verschoben
Hallo alle
Ich habe folgendes Problem: Ich habe ein Hauptnavi erstellt auf einer Homepage, welche auf Joomla basiert. Beim letzten Menüpunkt soll ein Dropdown erscheinen, mit Hover etc. Funktioniert auch alles. Nur wenn ich dann über einen Menüpunkt fahre, dann wird der Hover bei einem anderen Unterpunkt ausgeführt. Als wäre das ganze irgendwie verschoben. Kann mir da jemand helfen? Hier mein HTML Code, der von Joomla generiert wurde: HTML-Code:
<div id="navi"> <ul class="menu"> <li class="item-110"><a href="/joomla/" >Item 1</a></li> <li class="item-102 current active"><a href="/joomla/index.php/item2" >Item 2</a></li> <li class="item-103"><a href="/joomla/index.php/item3" >Item 3</a></li> <li class="item-104"><a href="/joomla/index.php/item4" >Item 4</a></li> <li class="item-105 deeper parent"><a href="/joomla/index.php/item5" >Item 5</a> <ul> <li class="item-107"><a href="/joomla/index.php/item5/subitem1" >Subitem 1</a></li> <li class="item-111"><a href="/joomla/index.php/item5/subitem2" >Subitem 2</a></li> <li class="item-112"><a href="/joomla/index.php/item5/subitem3" >Subitem 3</a></li> <li class="item-113"><a href="/joomla/index.php/item5/subitem4" >Subitem 4</a></li> <li class="item-114"><a href="/joomla/index.php/item5/subitem5" >Subitem 5</a></li> <li class="item-115"><a href="/joomla/index.php/item5/subitem6" >Subitem 6</a></li> </ul> </li> </ul> </div> <!-- navi end --> Code:
#navi{ margin-top:10px; margin-left:104px; position:absolute; } #navi li{ list-style-type:none; float:left; background:#e0e2e2; height:100px; width:210px; border-right:2px solid #b2b4b4; text-align:center; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; } #navi a{ color:black; font-family:Arial, Helvetica, sans-serif; font-style:italic; text-decoration:none; } #navi a:hover{ color:white; } ul.menu ul{ display:none; } ul.menu li:hover>ul{ display:block; } ul.menu ul li{ width:210px !important; height:25px !important; background:red !important; } ul.menu ul li a{ color:black !important; position:absolute; z-index:1; margin-top:-76px; } ul.menu ul li a:hover{ color:white !important; } ul.menu ul li:hover{ background:#0347b6 !important; } Danke und Gruss |
Sponsored Links |
|
|||
Hi, die Frage ist, wie soll es aussehen. Das Submenu ist ja nach rechts verschoben, das bekommst du mit ul.menu ul -> padding-left:0; weg, dann gibt es ein margin-top:-76px, nimm das mal raus.
Versuche auf !important zu verzichten. VG Geändert von mariane (22.08.2013 um 09:42 Uhr) |
Sponsored Links |
Stichwörter |
css, dropdown, navigation |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Dropdown Navigations | Cueball | CSS | 1 | 04.10.2012 06:42 |
Dropdown Navi funktioniert nicht | Star_Scream | CSS | 11 | 16.12.2009 14:17 |
CSS DropDown - läuft nicht im IE6 | NicolaibassDH | CSS | 3 | 17.09.2008 20:35 |
CSS Dropdown menu horizontal...Help please ... | Oni | CSS | 4 | 09.04.2008 10:48 |
Drop Down navi und CSS | caos | CSS | 8 | 20.09.2006 20:28 |