Automatische Größenanpassung meiner Menüliste CSS HTML

Wenn ich den Cursor auf die Schaltfläche GOOGLE bringe, ändert sich der Elternblock von selbst. Ich möchte die Enkel-Elemente außerhalb der Eltern-Schaltfläche.Automatische Größenanpassung meiner Menüliste CSS HTML

Code:

ol { 
 
    display: none; 
 
} 
 

 
li:hover ol { 
 
    display: block; 
 
    margin-left: -4.2em; 
 
} 
 

 
#shadow li { 
 
    list-style-type: none; 
 
    border: 2px solid black; 
 
    box-shadow: 5px 5px 5px gray; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
    width: 10em; 
 
    margin-left: 1.5em; 
 
    float: left; 
 
    display: block; 
 
}

<body> 
 
    <div id="shadow"> 
 
    <ul> 
 
     <li style="margin-left : -2.5em"> 
 
     <a href="http://www.google.com">GOOGLE</a> 
 
     <ol type="a"> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
     </ol> 
 
     </li> 
 
     <li><a href="http://www.youtube.com">YOUTUBE</a></li> 
 
     <li><a href="http://www.facebook.com">FACEBOOK</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

Quelle

2017-10-31 momopolo

Ich würde einfach die HTML-Struktur neu zu bearbeiten, so dass die Menüliste nicht in der obersten Ebene Menü "Schaltfläche" geschachtelt ist und dann müssen Sie nur die Menüliste auf dem Schweben der obersten Ebene anzeigen/ausblenden Speisekarte. –

Eine Möglichkeit, dies wäre einfach zu lösen, um die li Elemente die gleiche Höhe geben hover:

li:hover { 
    height: 18px; 
}

Dies kann gesehen werden das folgende Beispiel:

ol { 
 
    display: none; 
 
} 
 

 
li:hover { 
 
    height: 18px; 
 
} 
 

 
li:hover ol { 
 
    display: block; 
 
    margin-left: -4.2em; 
 
} 
 

 
#shadow li { 
 
    list-style-type: none; 
 
    border: 2px solid black; 
 
    box-shadow: 5px 5px 5px gray; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
    width: 10em; 
 
    margin-left: 1.5em; 
 
    float: left; 
 
    display: block; 
 
}

<body> 
 
    <div id="shadow"> 
 
    <ul> 
 
     <li style="margin-left : -2.5em"> 
 
     <a href="http://www.google.com">GOOGLE</a> 
 
     <ol type="a"> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
     </ol> 
 
     </li> 
 
     <li><a href="http://www.youtube.com">YOUTUBE</a></li> 
 
     <li><a href="http://www.facebook.com">FACEBOOK</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

this helps :)

Quelle

2017-10-31 22:08:32

Danke, dass es wirklich funktioniert – momopolo

ol { 
 
    display: none; 
 
} 
 

 
li:hover ol { 
 
    display: block; 
 
    margin-left: -4.2em; 
 
} 
 

 
#shadow li { 
 
    list-style-type: none; 
 
    border: 2px solid black; 
 
    box-shadow: 5px 5px 5px gray; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
    width: 10em; 
 
    margin-left: 1.5em; 
 
    float: left; 
 
    display: block; 
 
}

<body> 
 
    <div id="shadow"> 
 
    <ul> 
 
     <li style="margin-left : -2.5em; height: 1em;"> 
 
     <a href="http://www.google.com">GOOGLE</a> 
 
     <ol type="a"> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
     </ol> 
 
     </li> 
 
     <li><a href="http://www.youtube.com">YOUTUBE</a></li> 
 
     <li><a href="http://www.facebook.com">FACEBOOK</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

ol { 
 
    display: none; 
 
} 
 

 
li:hover ol { 
 
    display: block; 
 
    margin-left: -4.2em; 
 
} 
 

 
#shadow li { 
 
    list-style-type: none; 
 
    border: 2px solid black; 
 
    box-shadow: 5px 5px 5px gray; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
    width: 10em; 
 
    margin-left: 1.5em; 
 
    float: left; 
 
    display: block; 
 
}

<body> 
 
    <div id="shadow"> 
 
    <ul> 
 
     <li style="margin-left : -2.5em"> 
 
     <a href="http://www.google.com">GOOGLE</a> 
 
     <ol type="a"> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
      <li> <a href="http://www.google.com">google1</a> 
 
      </li> 
 
     </ol> 
 
     </li> 
 
     <li><a href="http://www.youtube.com">YOUTUBE</a></li> 
 
     <li><a href="http://www.facebook.com">FACEBOOK</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

Ich habe Ihrem Tag li ein Höhenattribut hinzugefügt. Ich glaube, das ist es, wonach du gesucht hast.

Quelle

2017-10-31 22:08:45 theGleep

Automatische Größenanpassung meiner Menüliste CSS HTML

Antwort

Verwandte Themen