2017-11-29 6 views
0

Wenn Sie mit der Maus über [Automotive] fahren, werden immer die Untermenüpunkte angezeigt, die nebeneinander angezeigt werden [Auktion erstellen] [Alle Auktionen anzeigen]; Ich muss es als Liste anzeigen.MVC4 - nav Dropdown-Menü

Bitte teilen Sie mir:

HTML-Code: (Erstellen Sie das Menü)

<div id="nav"> 
        <ul id="menu"> 
         <li>@Html.ActionLink("Home", "Index", "Home")</li> 
         <li>@Html.ActionLink("About", "About", "Home")</li> 
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
          @foreach (string category in ViewBag.Categories) 
          { 
           <li>@Html.ActionLink(category,"Index","Auction",new{category},null) 
           @if (category== "Automotive") 
           { 
           <ul> 
            <li>@Html.ActionLink("Create Auction", "Create", "Auction")</li> 
            <li>@Html.ActionLink("Display all auctions", "Auctions", "Auction")</li> 
           </ul> 
           } 
           </li> 
          } 

        </ul> 
       </div> 

CSS-Code:
------------------ ---------------------------------------------- Ich habe das hinzugefügt Code:

#menu ul { 
     display: none; 
     position: absolute; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     padding: 12px 16px; 
     z-index: 1; 
    } 

    #menu li:hover > ul { 
     display:block; 
    } 
    ----------------------------------------------------------- 
    ul#menu { 
     font-size: 1.3em; 
     font-weight: 600; 
     margin: 0 0 5px; 
     padding: 0; 
     text-align: right; 
    } 

    ul#menu li { 
     display: inline; 
     list-style: none; 
     padding-left: 15px; 
    } 

    ul#menu li a { 
     background: none; 
     color: #999; 
     text-decoration: none; 
    } 

    ul#menu li a:hover { 
     color: #333; 
     text-decoration: none; 
    } 

enter image description here

enter image description here

Antwort

0
ul#menu li { 
    display: inline; 
    list-style: none; 
    padding-left: 15px; 

}

sagt alle li unter #menu inline angezeigt werden müssen.

Sie sollten einige Besonderheiten für Untermenü wie

ul#menu li ul li { 
    display: block; 
} 

Dann fügen Sie, wenn Sie Ihr Untermenü unter dem entsprechenden Punkt positionieren wollen Sie die Position des Elements relativ setzen müssen und positionieren Sie dann das Untermenü mit Position absolut .

so

ul#menu li { 
    position:relative 
} 

ul#menu li ul { 
    position: absolute; 
    left: 0; 
    top: 100%; 
} 
+0

Das ist großartig. Vielen Dank. aber - Menü Drop-Down-Anzeige an der falschen Stelle. immer unter [Kontakt], irgendeinen Hinweis. – KekoSha

+0

können Sie einen Screenshot hinzufügen? Ich bin nicht sicher, den "immer unter [Kontakt]" Teil zu verstehen –

+0

Bitte finden Sie den Screenshot in der Frage unter dem Originalbild – KekoSha