Erstellen dropdown-Menü mit Untermenüs, die auf rollover

Ich bin auf der Suche zum erstellen von CSS, dass diese Anzeige links unten in der "Links nach rechts" divs " und wenn eine Aktion wie "rollover" passiert, der entsprechende sub-Menü erscheint rechts unten das Menü Sie einfach überrollt.

Hier ist der SCHLÜSSEL. Dieses Menü wird "Dynamisch Geladen" aus der wordpress-Datenbank, also muss ich wissen, wie man Stil der "main-Menüs" und dann auf den rollover von jedem Menü das dropdown erscheinen unten in der richtigen Stelle. Aber ich kann nicht hart kodierten Namen wie die Menüpunkte ändern wird etc.. macht das Sinn?

Ist hier eine dynamische Beispiel geladen, aus einer wordpress-Datenbank.

DIESEN CODE UNTER: 

<? 
require('wordpress/wp-blog-header.php');
?>

<div class="access">
  <?php wp_nav_menu(); ?>
</div>

LASTEN DER FOLGENDEN HTML UNTER:

<div class="access">
  <div class="menu-papamenu-container"><ul id="menu-papamenu" class="menu"><li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45"><a href="?p=love">Home</a>
<ul class="sub-menu">
    <li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46"><a href="?p=Happy">Happy</a></li>
    <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="?p=coolBeans">Cool Beans</a></li>
    <li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href="?p=SoHappy">So Happy</a></li>
</ul>
</li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a href="?p=Contact">Contact Us</a>
<ul class="sub-menu">
    <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="?p=Address">Address</a></li>
    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="?p=Phone">Phone</a></li>
    <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="?p=Email">Email</a></li>
</ul>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="?p=About">About Us</a>
<ul class="sub-menu">
    <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="?p=Company">Company</a></li>
    <li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55"><a href="?p=CompanyAddress">Company Address</a></li>
</ul>
</li>
</ul></div></div>

Aber wie kann ich das hinzufügen von CSS, um ihm die richtige navigation drop-downs etc.?

Die AUSGABE ohne CSS kann sehen Sie hier.

InformationsquelleAutor Papa De Beau | 2013-08-30
  1. 1

    Neige ich dazu, um die top-level-li inline-blocks für diese und stellen Sie dann die sub-Menüs blocks. Dann verwenden Sie einfach die css :hover-Selektor und einige absolute Positionierung des sub-Menüs macht den job. Aus einer Geige für Sie unter Beweis stellen.

    http://jsfiddle.net/jaredkhan/EuH8P/1

    • Oh wow. Vielen Dank soo viel. Sie beide haben es gleich an!!! Erstaunlich. Problem ist nur ich weiß nicht, wer die passende Antwort zu geben, weil für Sie beide es sagt 5 Stunden. Die zunächst beantwortet denke ich sollte es bekommen? Trotzdem danke ich Euch beiden aus tiefstem Herzen. 🙂
    • Beide sind gültige Lösungen, treffen Sie Ihre Wahl! Just bewusst sein, dass Steven die Lösung wird auf den Inhalt auswirken unten es so, wenn Sie Inhalte unter dem Menü-div wird nach unten gedrückt werden, wenn ein Untermenü geöffnet ist. Mir vermeidet, dass wegen der Verwendung von absoluter Positionierung. Es hängt wirklich was Sie für gehen.
    • Hey Jared, ich habe eine Frage für Sie. Kann ich E-Mail Sie? Oder können wir einen privaten chat starten? Ich denke, dass wir im chat eine Menge, bevor wir diese option haben. Sowie mindestens zehn weitere Antworten.
    InformationsquelleAutor Jared Khan
  2. 1

    http://jsfiddle.net/UVkGG/

    .menu{
    white-space:nowrap; /* Stops the menu from wrapping if the container is too small */
}
.menu>li{
    display:inline-block; /* Put menu items on one line */
    height:20px; /* Set default height for top level menu */
    width:200px;
    padding:5px;
    line-height:24px;
    background:#eee;
    vertical-align:top; /* Align menu li's to top of page*/
    list-style:none;
    cursor:pointer;
    overflow:hidden; /* Hide sub menu */
}
.menu>li:hover{
    height:auto; /* Remove height limit to show sub menu */
}
.sub-menu{
    margin:0; padding:0;
}
.sub-menu>li{
    display:block; /* Put sub-menu items on separate lines */
    padding:5px;
    margin:2px;
    background:#ccc;
    list-style:none;
    cursor:pointer;
}
.sub-menu>li:hover{
    background:#aaa;
}
.menu a{
    text-decoration:none;
    color:#111;
    font-weight:bold; 
    display:block; /* Makes the entire highlighted block clickable not just the text */
}
    • Oh wow. Vielen Dank soo viel. Sie beide haben es gleich an!!! Erstaunlich. Problem ist nur ich weiß nicht, wer die passende Antwort zu geben, weil für Sie beide es sagt 5 Stunden. Die zunächst beantwortet denke ich sollte es bekommen? Trotzdem danke ich Euch beiden aus tiefstem Herzen. 🙂
    InformationsquelleAutor Steven
Schreibe einen Kommentar