メニューリストの自動サイズ変更CSS HTML

GOOGLEボタンにカーソルを置くと、親ブロックのサイズが自動的に変更されます。親要素の外に孫要素が必要です。メニューリストの自動サイズ変更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>

出典

2017-10-31 momopolo

メニューリストがトップレベルメニュー "ボタン"内にネストされていないように、単にHTML構造を再作成し、トップレベルのホバリングでメニューリストを表示/非表示にするだけですメニュー。 –

一つの方法は、単純にli要素にhoverに同じ高さを与えることになります：

li:hover { 
    height: 18px; 
}

これはで見ることができます次の例：

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>

希望はこのことができます:)

出典

2017-10-31 22:08:32

本当にありがとう – 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>

liタグにheight属性を追加しました。私はそれがあなたが探していたものだと思います。

出典

2017-10-31 22:08:45 theGleep

メニューリストの自動サイズ変更CSS HTML

答えて

関連する問題