絶対div内に相対ドロップダウンボックスを配置することはできますか？

Question

私はいくつかの困難を抱えています。誰かが私に正しい方向を向けることを願っています。私はCSSを使い慣れていないので、これは非常に単純な状況です。

私が欲しいもの：私はそのヘッダに沿って水平に実行し、私のヘッダー内（巣？）複数のドロップダウンボックスを植えたい

。

Iは相対ドロップダウンボックスを作成し、相対的なコンテナである絶対ヘッダに配置しようとした：私が試し何

。

ラッパー/コンテナ（相対） - >ヘッダー本部（アブソリュート） - >ドロップダウンボタン（相対） - >ドロップダウンの内容（絶対）

私が得たもの：

相対ドロップダウンボタンは絶対ヘッダーの下に表示されます。ドロップダウンボックスは機能しますが、それは私が望むところに位置しません。どのようにして私が望むものを得ることができるのか分かりません。

div#container { 
 
    /*Features*/ 
 
    /*Position*/ 
 
    position: relative; 
 
    top: 5%; 
 
    left: 15%; 
 
    /*Dimensions*/ 
 
    height: 90%; 
 
    width: 70%; 
 
    /*Font and colours*/ 
 
    background: gray; 
 
} 
 

 
div#header { 
 
    /*Features*/ 
 
    position: absolute; 
 
    border-style: solid; 
 
    /*Dimensions*/ 
 
    height: 10%; 
 
    top: 0%; 
 
    left: 0; 
 
    right: 0; 
 
    /*Font and colours*/ 
 
    background: #e67300; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    clear: both; 
 
} 
 

 
.dropdown { 
 
    /*Position*/ 
 
    top: 10%; 
 
    left: 15%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    /*Position*/ 
 
    position: absolute; 
 
    z-index: 1; 
 
    display: none; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
    <p>Title</p> 
 
    <div class="dropdown" style="font-size:10px"> 
 
     Mouse over me please 
 
     <div class="dropdown-content"> 
 
     <a href="index.html">Home</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ただ単にあなたのdiv＃ヘッダからの高さプロパティを削除します。このヘルプを使用すると、スクリーンショット、またはワイヤフレームを与えることができる

div#container { 
 
    /*Features*/ 
 
    /*Position*/ 
 
    position: relative; 
 
    top: 5%; 
 
    left: 15%; 
 
    /*Dimensions*/ 
 
    height: 90%; 
 
    width: 70%; 
 
    /*Font and colours*/ 
 
    background: gray; 
 
} 
 

 
div#header { 
 
    /*Features*/ 
 
    position: absolute; 
 
    border-style: solid; 
 
    /*Dimensions*/ 
 
    top: 0%; 
 
    left: 0; 
 
    right: 0; 
 
    /*Font and colours*/ 
 
    background: #e67300; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    clear: both; 
 
} 
 

 
.dropdown { 
 
    /*Position*/ 
 
    top: 10%; 
 
    left: 15%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    /*Position*/ 
 
    position: absolute; 
 
    z-index: 1; 
 
    display: none; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
    <p>Title</p> 
 
    <div class="dropdown" style="font-size:10px"> 
 
     Mouse over me please 
 
     <div class="dropdown-content"> 
 
     <a href="index.html">Home</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

CSSファイルにこれを追加します。

p{ 
    display:inline-block; 
} 

<p>Title</p>をあなたは<p>は、行全体を占有ブロック要素であることを知っておく必要があります。

これはあなたのCSSが変更された：

div#container 
{ 
    /*Features*/ 
    /*Position*/ 
    position:relative; 
    top:5%; 
    left:15%; 
    /*Dimensions*/ 
    height:90%; 
    width:70%; 
    /*Font and colours*/ 
    background:gray; 
} 

div#header 
{ 
    /*Features*/ 
    position:absolute; 
    border-style:solid; 
    /*Dimensions*/ 
    height:10%; 
    top:0%; 
    left:0; 
    right:0; 
    /*Font and colours*/ 
    background:#e67300; 
    text-align:center; 
    clear:both; 
} 
p{ 
    display:inline-block; 
} 

.dropdown 
    { 
     /*Position*/ 
     top:10%; 
     left:15%; 
     position:relative; 
     display: inline-block; 

    } 

    .dropdown-content 
    { 
     /*Position*/ 
     position:absolute; 
     z-index:1; 
     display:none; 
    } 

    .dropdown:hover .dropdown-content 
    { 
     display:block; 
    }