XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Dropdown Navi verschoben (http://xhtmlforum.de/showthread.php?t=69855)

rschweri 17.08.2013 17:58

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 -->

Und mein CSS-Code:

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;
}

Ich hoffe ihr versteht was ich meine :)

Danke und Gruss


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:05 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022