CSS-Menü, um die Anzeige vertikal mit sub-Menüs, um die richtige

Ich bin mit diesem CSS-Code:

.vertical-nav {
    height:auto;
    list-style:none;
    width: 100%; /******* MODIFIED ********/
    margin: 20px 0 0 0;
}
.vertical-nav li {
    height: 25px;
    margin: 0;
    padding: 5px 0;
    background-color: #666;
    border: none;
    text-align: center;
    display: inline-block;
    float: left;
    width: 100px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
    background-color:#f36f25;
    color:#FFFFFF;
}
.vertical-nav li a {
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#F36F25;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}
vertical-nav ul li ul {
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul {
    display:block;
}
vertical-nav ul li:hover ul li {
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover {
    background-color:#333333;
}
vertical-nav ul li ul li a {
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
    text-decoration:none;
}
.vertical-nav li ul {
    display: none;
    margin-top: 10px;
    padding: 0;
}
.vertical-nav li:hover ul {
    display: block;
}
.vertical-nav li:hover .sub-menu
{
    display: table;
}
.sub-menu li
{
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    display:table-row;
    z-index:1;
    position:relative;
}
.sub-menu li a
{
    display:inline-block;
    padding: 0 10px;
}

Für mein horizontales Menü, Wie kann ich die Anzeige im Menü vertikal, sondern auch die sub-Menüs-Anzeige rechts neben jedem link auf hover?

Bitte überprüfen Sie, Fiddle hier

Dein code scheint zu viel redundantes Zeug, wie zwei display Erklärungen auf der ...li:hover ul element. Könnte es bezahlen, diese zu beheben, bis irgendwann.

InformationsquelleAutor user2710234 | 2014-01-13

css html

6

Versuchen, den code in diesem fiddle:

http://jsfiddle.net/QdDmL/5/

Ich Geändert:
```
.vertical-nav li:hover .sub-menu
{
position: relative;   
margin-top: -27px;
}

.sub-menu li
{
position: relative;
display: block;
top: 0;
left: 100%;
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
}
```
macht dies das Untermenü float auf der rechten Seite des Menü. Macht die position ist ein entscheidender Teil. Mit dem margin-top es ist ausgerichtet auf den richtigen Menüpunkt.

Cheers

Nur aus Neugier: Warum -27.5 px? Ich weiß nicht, ein monitor anzeigen kann einen halben pixel. Ich kann mir nicht vorstellen, wie diese durch physikalisch möglich 😛
sorry 😀 nur -27px dann

InformationsquelleAutor Filip Huysmans
2

Können Sie fügen Sie einfach
```
clear:both;
```
Ihrem .vertical-nav li Stil. Dadurch wird es vertikal.

Ich zog auch Ihr das Untermenü, um die korrekte position. Für diese habe ich Hinzugefügt,
```
top: -37px;
left: -20px;
```
Ihrem .sub-menu li Stil

Überprüfen Sie diese Geige: http://jsfiddle.net/QdDmL/3/

In Ihrer fiddle, Menü nicht nach rechts schieben. Es ist unvollständig beantworten.
jsfiddle.net/QdDmL/2 ich habe die änderungen vorgenommen, um das sub-Menü-Anzeige rechts, aber nicht die Anzeige an der richtigen Stelle , irgendwelche Ideen?
Ihr kommt von hier aus .sub-menu li machen es margin-left:100px;
Dies ist, weil das übergeordnete Listenelement ist ein block, und nimmt die ganze Breite. Wenn wir irgendwie könnte es sein, inline...
Obwohl ich dies von Ihnen positiv bewertet werden, es ist so eine Art hack, und es wäre schön, das zu haben eine passende Lösung.

InformationsquelleAutor RononDex

Verwenden Sie die folgenden:

HTML

<ul class="vertical-nav">
    <li><a href="">Link 1</a></li><br/>
    <li class="second"><a href="">Link 2</a></li>
    <ul class="sub-menu">
    <li><a herf="">Sub Link 1</a></li><br/>
    <li><a href="">Sub Link 2</a></li>
    </ul>
</ul>

CSS

.vertical-nav{
    list-style:none;
    margin:0px;
    padding:0px;
}
.vertical-nav li{
    padding-top:15px;
    padding-bottom:15px;
    display:inline-block;
    vertical-align:top;
}
.vertical-nav li a{
    background-color: #666;
    padding:15px;
    color:#ffffff;
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
}

.vertical-nav ul{
    padding:1px;
    display:none;
}

.vertical-nav li:hover a{
    background-color:#f36f25;
    color:#FFFFFF;
}

.vertical-nav .second:hover ~ .sub-menu{
    display:inline-block;
}

Demo

Ich kann nicht scheinen, um bewegen Sie den Mauszeiger über das Untermenü?
Ich schuf den fiddle für das, was die user gefragt : CSS-Menü, um die Anzeige vertikal mit sub-Menüs, um die richtige

InformationsquelleAutor Zword

Es ist möglich, um vertikales Menü mit allen tiefen mit single-universal-style-Klasse für jedes level:

https://jsfiddle.net/k8gy79tv/1/

CSS:

nav ul {list-style-type: none; margin:0; padding:0; width: 200px; background-color: #f1f1f1; position: fixed;}
nav ul li {min-width: 200px; font-size:14px;}
nav ul li a {display: block; color: #000; text-decoration: none; padding: 16px 0 16px 16px;}
ul li:hover > a {color: white; background-color: #555;}

.dropdown-content {
    min-width: 150px;
    display: none;
    left: 200px;
    float:left;
    position: absolute;
    font-size:14px;
    margin-top: -48px;
}
.dropdown-content a {
    background-color: #fbfbfb;
    color: black;
    text-decoration: none;
    display: block;
    text-align: left;
    padding: 16px 0 16px 16px;
}
.dropdown:hover > .dropdown-content {
    display: inline-block;
}

HTML:

<body>
<nav>
<ul>
    <li class="dropdown"><a href="">Menu item 1</a>
        <ul class="dropdown-content">
            <li class="dropdown"><a href="">Menu item 11</a>
                <ul class="dropdown-content">
                    <li class="dropdown"><a href="">Menu item 111</a>
                        <ul class="dropdown-content">
                            <li class="dropdown"><a href="">Menu item 1111</a>
                                <ul class="dropdown-content">
                                    <li class="dropdown"><a href="">Menu item 11111</a>
                                    </li>
                                    <li>
                                        <a href="">Menu item 11112</a>
                                    </li>
                                    <li>
                                        <a href="">Menu item 11113</a>
                                    </li>
                                    <li>
                                        <a href="">Menu item 11114</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="">Menu item 1112</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Menu item 112</a>
                    </li>
                    <li>
                        <a href="">Menu item 113</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">Menu item 12</a>
            </li>
            <li>
                <a href="">Menu item 13</a>
            </li>
            <li>
                <a href="">Menu item 14</a>
            </li>
        </ul>
    </li>
  <li><a href="">Menu item 2</a></li>
  <li class="dropdown"><a href="">Menu item 3</a>
  <ul class="dropdown-content">
    <li class="dropdown"><a href="">Menu item 31</a>
        <ul class="dropdown-content">
            <li class="dropdown"><a href="">Menu item 311</a>
                <ul class="dropdown-content">
                    <li class="dropdown"><a href="">Menu item 3111</a>
                        <ul class="dropdown-content">
                            <li><a href="">Menu item 31111</a></li>
                            <li><a href="">Menu item 31112</a></li>
                            <li><a href="">Menu item 31113</a></li>
                            <li><a href="">Menu item 31114</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="">Menu item 312</a></li>
            <li><a href="">Menu item 313</a></li>
            <li><a href="">Menu item 314</a></li>
        </ul>
    </li>
    <li><a href="">Menu item 32</a></li>
    <li><a href="">Menu item 33</a></li>
    <li><a href="">Menu item 34</a></li>
  </ul>
  </li>
  <li><a href="">Menu item 4</a></li>
</ul>
</nav>
</body>

InformationsquelleAutor Andrey Ciclicci

DEMO

nav ul li {
    position: relative;
}
nav ul li:hover > ul {
    position: absolute;
    display: block;
    top: 0;
    left: 100%;
    background: #aaa;
}

Diese Antwort nicht seinen vorhandenen code. Auch nur die Entsendung code ohne Erklärung um es ist, was macht eine low-quality Antwort

InformationsquelleAutor Anup

1

Dies ist meine version davon fiddle

Dies ist, was ich Hinzugefügt habe:
```
.sub-menu{/* added */
   position:absolute;
    right:-95px;/* dependent on button size of main nav */
    top:0;
}
```
Weiter mehr entfernte ich die float:left; und die display:inline-block; auf die li wie Sie sehen können, im kommentierten code auf der Geige.

InformationsquelleAutor Anima-t3d

Ich ein paar styles, damit es funktioniert, keine rocketsince beteiligt 🙂

Check out the fiddle: jsfiddle.net/GLORIEN/gWFeW/

Änderte ich die Haupt-Liste-element inline-block zu block, entfernt die float:left und fügte position: relative:

.vertical-nav li {
    height: 25px;
    margin: 0;
    padding: 5px 0;
    background-color: #666;
    border: none;
    text-align: center;
    display: block;
    position: relative;
    width: 100px;  /******* MODIFIED ********/
}

Entfernt, die display: table-row:

.sub-menu li {
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    z-index:1;
    position:relative;
}

Die Liste der sub-navigation wird die position: absolute und top: 0 und left: 100%:

.vertical-nav li ul {
    display: none;
    padding: 0;
    display: none;
    padding: 0;
    position: absolute;
    top: 0;
    left: 100%;
}