ドロップダウンメニューの位置を設定する（CSS）

黄色の枠線のすぐ後ろにドロップダウンメニューを配置しようとしています。現在のコードでは、メニューカバー製品のボタン、私はそれが製品の赤で表示される必要があります。「クリックしてください」ボタンに見られるように。ドロップダウンメニューの位置を設定する（CSS）

コード：

ul { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    border: 2px solid red; 
 
} 
 
li { 
 
    float: left; 
 
    padding: 5px; 
 
    margin: 10px; 
 
    border: 2px solid green; 
 
} 
 
.button { 
 
    display: inline-block; 
 
    border: 1px dashed black; 
 
} 
 
.dropdown { 
 
    display: inline-block; 
 
    border: 1px solid yellow; 
 
} 
 
.menu { 
 
    padding: 15px; 
 
    display: none; 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    z-index: 1; 
 
} 
 
.menu a { 
 
    padding: 15px; 
 
    display: block; 
 
    width: 150px; 
 
    background-color: pink; 
 
    border: 2px solid black; 
 
} 
 
li:hover { 
 
    background-color: red; 
 
} 
 
.dropdown:hover { 
 
    background-color: red; 
 
} 
 
.dropdown:hover .menu { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Dropdown web</title> 
 
    <link rel="stylesheet" type="text/css" href="w3style.css"> 
 
    </head> 
 
    <body> 
 
    <ul> 
 
     <li>Home</li> 
 
     <li>About</li> 
 
     <li>Contect Us</li> 
 
     <div class="dropdown"> 
 
     <li> 
 
      <a class="button" href="#">Products</a> 
 
     </li> 
 
     <div class="menu"> 
 
      <a href="#">01</a> 
 
      <a href="#">02</a> 
 
      <a href="#">03</a> 
 
      <a href="#">04</a> 
 
      <a href="#">05</a> 
 
      <a href="#">06</a> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    <div class="dropdown"> 
 
     <button class="button">Click Me</button> 
 
     <div class="menu"> 
 
     <a href="#"> Link 01 </a> 
 
     <a href="#"> Link 02 </a> 
 
     <a href="#"> Link 03 </a> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-04-12 Red Ali

あなたのHTMLは無効です。 'ul'だけが' ul'の子供です。 –

質問をするときは質問エディタでCtrl + Mを押し、コードを適切なボックス（ala jsFiddle）に入れてください。スタックスニペットコメントを手動で追加する必要はありません。 – gibberish

興味深い。私の訂正はあなたが本当の答えとしてチェックしたのとまったく同じでした。しかし、幸運 – Mojtaba

a ul。

次に、ドロップダウンが親の外に表示されるように、別のクリア方法があります。ul。

Codepen Demo

.cf:after { /* clearfix */ 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    border: 2px solid red; 
 
} 
 
li { 
 
    float: left; 
 
    padding: 5px; 
 
    margin: 10px; 
 
    border: 2px solid green; 
 
    position: relative; /* positioning context */ 
 
} 
 
.button { 
 
    display: inline-block; 
 
    border: 1px dashed black; 
 
} 
 
.menu { 
 
    padding: 15px; 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    border: 1px solid blue; 
 
    z-index: 1; 
 
} 
 
.menu a { 
 
    padding: 15px; 
 
    display: block; 
 
    width: 150px; 
 
    background-color: pink; 
 
    border: 2px solid black; 
 
} 
 
li:hover { 
 
    background-color: red; 
 
} 
 
.dropdown:hover { 
 
    background-color: red; 
 
} 
 
.dropdown:hover .menu { 
 
    display: block; 
 
}

<ul class="cf"> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li>Contect Us</li> 
 
    <li class="dropdown"> 
 
    <a class="button" href="#">Products</a> 
 
    <div class="menu"> 
 
     <a href="#">01</a> 
 
     <a href="#">02</a> 
 
     <a href="#">03</a> 
 
     <a href="#">04</a> 
 
     <a href="#">05</a> 
 
     <a href="#">06</a> 
 
    </div> 
 
    </li> 
 
</ul>

出典

2016-04-12 15:10:36

ありがとうメイト、素晴らしいものが少し複雑です。 :) –

これも正しい方法です。他のすべては***無効*** HTMLです。 'li'と' div'を混在させることはできません。 'li'だけが' ul'の直接の子として許されます。 –

一部styleを追加することで、あなたはそれを解決することができるように、これらの二つのボタンの高さが異なっているため、問題があります。これはあなたの問題のための1つの可能な解決策になることができます：

ul { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    border: 2px solid red; 
 
} 
 
li { 
 
    float: left; 
 
    padding: 5px; 
 
    margin: 10px; 
 
    border: 2px solid green; 
 
} 
 
.button { 
 
    display: inline-block; 
 
    border: 1px dashed black; 
 
} 
 
.dropdown { 
 
    display: inline-block; 
 
    border: 1px solid yellow; 
 
} 
 
.menu { 
 
    padding: 15px; 
 
    display: none; 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    z-index: 1; 
 
} 
 
.menu a { 
 
    padding-top: 15px; 
 
    display: block; 
 
    width: 150px; 
 
    background-color: pink; 
 
    border: 2px solid black; 
 
} 
 
li:hover { 
 
    background-color: red; 
 
} 
 
.dropdown:hover { 
 
    background-color: red; 
 
} 
 
.dropdown:hover .menu { 
 
    display: block; 
 
    margin-top: 54px; 
 
}

<ul> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li>Contect Us</li> 
 

 
    <div class="dropdown"> 
 
    <li> <a class="button" href="#">Products</a> 
 
    </li> 
 

 
    <div class="menu"> 
 
     <a href="#">01</a> 
 
     <a href="#">02</a> 
 
     <a href="#">03</a> 
 
     <a href="#">04</a> 
 
     <a href="#">05</a> 
 
     <a href="#">06</a> 
 

 
    </div> 
 

 
    </div> 
 
</ul> 
 

 

 
<div class="dropdown"> 
 

 
    <button class="button">Click Me</button> 
 

 
    <div class="menu" style="margin-top: 0px"> 
 
    <a href="#"> Link 01 </a> 
 
    <a href="#"> Link 02 </a> 
 
    <a href="#"> Link 03 </a> 
 
    </div> 
 

 
</div>

jsFiddle

のみ liはの子供を許可されているとしてあなたがHTML（現在は無効ある ）を補正する必要が

出典

2016-04-12 15:03:18 reshad

ドロップダウンメニューの位置を設定する（CSS）

答えて

関連する問題