Menüleiste mit Hover-Unterkategorien?

Question

Ich versuche, eine Menüleiste mit 2 Ebenen von Menüs zu erstellen. Das oberste Menü ist das wichtigste. Dann hat die zweite Ebene darunter einige Unterkategorien. Jetzt müssen Sie zuerst auf das Hauptmenü klicken und diese Seite laden, um die Unterkategorie-Menüelemente für diesen Abschnitt anzuzeigen, da sie nur fest in die Seite codiert sind. Ich möchte es so machen, dass, wenn Sie den Mauszeiger über die Hauptmenüpunkte bewegen, das Untermenü geladen wird.

Here is a jsFiddle of the navigation area and CSS

Here are a couple of screenshots of what it looks like

Was würde das meine beste Methode zur Erfüllung sein. Ich bin nicht der Erfahrenste, aber ich verstand HTML und CSS sehr gut. Jede Hilfe in die richtige Richtung wäre großartig. Vielen Dank.

Answer 1

ich diese Art von Menü in der Vergangenheit gemacht habe, habe ich eine Kopie des Codes erstellt haben, können Sie hier http://jsfiddle.net/PWFGd/24/

Die Eigenschaft, die Sie verwenden möchten, finden ist:

selector{ 
    display: none; 
} 

selector:hover{ 
    display: block; 
} 

Hoffnung es hilft.

Aymeric.

Answer 2

Sie können einen allgemeinen Geschwisterkombinator (~) mit Ihrer aktuellen Struktur verwenden, um so etwas zu erreichen. Verwenden Sie das Pseudoelement , um den Anzeigezustand (oder die Sichtbarkeit) des Untermenüs umzuschalten.

http://jsfiddle.net/PWFGd/25/

/* on hover of mainmenu, find subnav and show it */ 
.mainMenu:hover ~ ul.subNav { 
    display: block; 
} 

ul.subNav{ 
    display: none; /* hide submenu */ 
    font:normal 11px/12px Arial, Helvetica, sans-serif; 
    padding:4px 0 0 0; 
} 

Es gibt viele Beispiele auf dem Netz von CSS-basierten Navigationsmenüs. Ich denke, dass Sie vielleicht Ihre HTML-Struktur überdenken und eines von denen verwenden sollten. Google

Answer 3

@ Aymeric Antwort ist gut, es ist auch "Ebene 2 horizontale Navigation in CSS" genannt Ich benutze sie oft in meinen Projekten,

here is demo what u looking for

complete tutorial link