CSS-dropdown-nav verursacht html-Inhalt zu bewegen

meiner ersten Frage SO, hoffe, es ist bis zu kratzen, sollte ein einfaches lösen für jemanden, der sehr versiert in der Kunst des css...

Das problem im habend ist, dass die dropdown-Teile in meinem css-driven navigation sind, was die Inhalte unter ihm nach rechts verschoben. Ich habe ähnliche-ish Fragen gepostet, aber ich habe versucht, alle Lösungen und nichts scheint, um es arbeiten.....

Den nächsten ich habe es geschafft zu bekommen, ist das hinzufügen position:absolute; zu den #nav li:hover ul tag, und das macht halt den Inhalt aus bewegen, schafft aber ein neues problem, das dropdown-Untermenü ist nur sichtbar, wenn der Mauszeiger über das Menüelement der obersten Ebene, und zu versuchen, bewegen Sie die Maus nach unten das Untermenü bewirkt, dass es verschwindet... ein weiteres problem, das ich zu finden, bin ebenso frustrierend zu lösen...

den html-Code für die navigation ist die standard-verschachtelte Listen:

<div id="navigation_panel" class="orange_grad">
    <!-- navigation-->
      <ul id="nav">
            <li><a href="#">about us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">staff</a></li>
                            <li class="orange_grad"><a href="2">venue</a></li>
                            <li class="orange_grad"><a href="2">history</a></li>
                            <li class="orange_grad"><a href="2">community theatre</a></li>
                            <li class="orange_grad"><a href="2">rep theatre</a></li>
                            <li class="orange_grad"><a href="2">theatre school</a></li>
                            <li class="orange_grad"><a href="2">official partners</a></li>
                    </ul>
            </li>
            <li><a href="#">join us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">friends membership</a></li>
                            <li class="orange_grad"><a href="2">wine club</a></li>
                    </ul>
            </li>
            <li><a href="#">hire</a>
                    <ul>
                            <li class="orange_grad"><a href="1">business</a></li>
                            <li class="orange_grad"><a href="2">rehersal space</a></li>
                            <li class="orange_grad"><a href="2">community groups</a></li>
                            <li class="orange_grad"><a href="2">theatre productions</a></li>
                            <li class="orange_grad"><a href="2">memorable occasions</a></li>
                    </ul>
            </li>
            <li><a href="#">contact</a>
                    <ul>
                            <li class="orange_grad"><a href="1">list of contacts</a></li>
                            <li class="orange_grad"><a href="2">contact us now</a></li>
                    </ul>
            </li>
            <li class=" last"><a href="#">support</a>
                    <ul>
                            <li class="orange_grad last"><a href="1">donations + requests</a></li>
                            <li class="orange_grad last"><a href="2">past sponsors</a></li>
                            <li class="orange_grad last"><a href="2">thanks</a></li>
                            <li class="orange_grad last"><a href="2">volunteers</a></li>
                            <li class="orange_grad last"><a href="2">set up a community event</a></li>
                    </ul>
            </li>
    </ul>

und der css lautet wie folgt:

#navigation_panel {border-radius: 18px 18px 0 0/18px 18px 0 0; width: 900px; height:50px;}

#nav { margin:0; padding: 0; list-style:none;}
#nav a{ color:black; font-size: 20px; text-decoration:none; min-height:50px; width:95px;}
#nav li {text-align:center; float:left; padding:14px 8px ; cursor:pointer; width:95px;}
#nav li.last{width:99px;}

#nav li ul {margin-top:14px; margin-left:-8px; padding:0; display: none; list-style:none;}
#nav li ul li{ border:1px solid black; width:95px; padding:6px 8px;}
#nav li ul li a{/*font-family:arial;*/font-size:14px;}

#nav li:hover{ text-decoration:underline; }
#nav li:hover ul{display: block;}
#nav li:hover ul li {clear: left;}

Habe ich versucht, Lösungen zu finden, die über die normal-route (Suche auf google, etc.) sowie das Spiel mit verschiedenen Positionierung-Konfigurationen, aber ich kann einfach nicht scheinen, um dieses Problem zu lösen...
Vielen Dank für jede Hilfe im Voraus, dieses problem wurde driving me mad den ganzen Tag!

InformationsquelleAutor mr_lewjam | 2012-11-03

20

Aktualisiert

Endlich die chance, einen frischen Blick auf diese. Alles, was Sie brauchen, ist fügen Sie die folgenden #nav li ul:
```
position: absolute;
z-index: 100;
```
Funktioniert im IE8/9, FF und Chrome, wenn die Positionierung des sub-Menü aus-im IE7, mit oder ohne meine änderung. Um das zu beheben, empfehle ich IE7 bestimmte CSS-durch was auch immer Methode, die Sie bevorzugen.

ah, gute Arbeit, bedeutet dies nicht, lösen das problem der Verlagerung der Inhalt, aber dies verursacht ein neues problem, wenn die Maus bewegt wird aus dem Mauszeiger über das Menüelement der obersten Ebene der sub-Menü, das Untermenü verschwindet...die in der Frage genannten
Doh! Ich Folge verpasst. Ich werde sehen, über etwas mehr und sehen, ob ich finden kann, das Problem. Haben Sie Probleme in einem bestimmten browser? Ich habe aktualisiert die CSS und in Chrome, FF und IE7-9 ich bin in der Lage, führen Sie den Cursor über das sub-Menü: jsfiddle.net/H3tRM/1
im Test mit google chrome, und das jsfiddle Sie eigentlich vorgesehen, scheint gut zu funktionieren, aber wenn ich es auf meiner gesamten Website, wird das problem des verschwindenden sub-Menü scheint zu bestehen..
Aktualisiert die Antwort für Sie.
vielen, vielen Dank!

InformationsquelleAutor Mathachew

Können Sie versuchen, etwas zu tun mit z-index. Z-index ist "machen" Schichten, also vielleicht können Sie Ihre sub-navigation z-index: 2.

Aber, in solchen Situationen als dropdown-Menü empfehle ich die Verwendung von jQuery. Ich habe einmal versucht, um dropdown-Menü mit reinem CSS und HTML, aber fanden bald heraus, dass jQuery die Art und Weise ist, ist besser.

Beispiel für ein dropdown-Menü mit jQuery: jsfiddle

jQuery:

$(".subnav").hide();
$(".navigation li a, .subnav").hover(function(){
    $(this).parent().find(".subnav").stop().fadeIn(400);
}, function(){
    $(this).parent().find(".subnav").stop().fadeOut(400);
});

HTML:

<div>
    <ul class="navigation">
        <li><a>Example 01</a></li>
        <li><a>Example 02</a>
            <ul class="subnav">
                <li><a>Lorem</a></li>
                <li><a>Impsum</a></li>
                <li><a>Dolor</a></li>
                <li><a>Sit</a></li>
                <li><a>Amet</a></li>
            </ul>    
        </li>
        <li><a>Example 03</a></li>
        <li><a>Example 04</a></li>
    </ul>                                        
</div>

CSS:

.navigation li{
    display: inline;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 0 10px;
    position: relative;
}
.navigation li a:hover{
    color: #999;
}
.subnav li{
    display: list-item;
    padding: 5px 10px;
}
.subnav{
    border: 1px solid #000;
    width: 70px;
    position: absolute;
    z-index: 2;
    margin-left: 10px;
}

danke für den Vorschlag ich werde versuchen, es heute Abend und Sie wissen lassen, wie ich auf Sie
trotzdem danke, aber ich bin gona verwenden Sie die Reine css obige Antwort, da es für mich einfacher zu implementieren, zu dieser Zeit, aber wenn ich noch einen anderen bauen, der dropdown-von Grund auf krank definiately jquery verwenden...
Froh zu hören, dass. 🙂

InformationsquelleAutor Doozerman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.