ドロップダウンメニューallign

各 "Something"の下には、互いに隣り合う2つのサブメニューがあります。やあ、私はこれと何時間も苦労している。ドロップダウンメニューallign

私のHTMLはこれまでのところです。

<!DOCTYPE html> 
 
\t <html> 
 
\t \t <head> 
 
\t \t \t <style> 
 
\t \t \t \t #whatever div { 
 
\t \t \t \t \t float:left; 
 

 
\t \t \t \t \t width: 100%; 
 
\t \t \t \t } 
 

 
\t \t \t \t #test { 
 
\t \t \t \t \t width:30%; 
 
\t \t \t \t \t display:inline-block; 
 
\t \t \t \t } 
 

 

 
\t \t \t \t .dropdown { 
 
\t \t \t \t \t position:relative; 
 
\t \t \t \t \t display: inline-block; 
 

 
\t \t \t \t } 
 

 
\t \t \t \t .dropdown-content { 
 
\t \t \t \t \t display: none; 
 
\t \t \t \t \t position: relative; 
 

 
\t \t \t \t \t min-width: 160px; 
 
\t \t \t \t \t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
\t \t \t \t } 
 

 
\t \t \t \t .dropdown-content a { 
 
\t \t \t \t \t color: black; 
 
\t \t \t \t \t padding: 12px 16px; 
 
\t \t \t \t \t text-decoration: none; 
 
\t \t \t \t \t display: block; 
 
\t \t \t \t } 
 

 
\t \t \t \t .dropdown-content a:hover {background-color: #f1f1f1} 
 

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

 
\t \t \t \t .dropdown:hover .dropbtn { 
 
\t \t \t \t \t background-color: #3e8e41; 
 
\t \t \t \t } 
 
\t \t \t </style> 
 
\t \t \t <div id="whatever"> 
 
\t \t \t \t <span id="test">Something</span> 
 
\t \t \t \t <div class="dropdown"> 
 
\t \t \t \t \t <button class="dropbtn">ULL</button> 
 
\t \t \t \t \t <div class="dropdown-content"> 
 
\t \t \t \t \t \t <a href="#">Link 1</a> 
 
\t \t \t \t \t \t <a href="#">Link 2</a> 
 
\t \t \t \t \t \t <a href="#">Link 3</a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <span id="test">Something</span> 
 
\t \t \t \t <span id="test">Something</span> 
 
</div> 
 
\t \t </body> 
 
\t </html>

あなたが見ることができるように基本的に、私は次のULL別のサブメニューを追加する必要があると私は何かのタイトルの下

出典

2016-03-29 CSSNoob

役立つかもしれないこと、有効なHTMLを作ります; - ）今すぐあなたは '

'のための閉じた '

'がありません。 – Carpetsmoker

Tnx ...これで完了しましたが、まだ問題は解決していません:) – CSSNoob

更新されたコードで質問を編集する必要があります。 – Carpetsmoker

を同じことを行う必要があります（最終版）注：

書き込み0代わり0PX
オープンボディータグ後方のコードERが他のULLボタン

ここ

ためのヘッドタグ

近いdivタグ

セットポジションを閉じている：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     #whatever div { 
 
      float: left; 
 
      width: 100%; 
 
     } 
 

 
     .test { 
 
      width: 30%; 
 
      display: inline-block; 
 
     } 
 

 
     .dropdown { 
 
      display: inline-block; 
 
     } 
 

 
     .dropdown-content { 
 
      display: none; 
 
      position: absolute; 
 
      min-width: 160px; 
 
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
     } 
 

 
     .dropdown-content a { 
 
      color: black; 
 
      padding: 12px 16px; 
 
      text-decoration: none; 
 
      display: block; 
 
     } 
 

 
     .dropdown-content a:hover { 
 
      background-color: #f1f1f1 
 
     } 
 

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

 
     .dropdown:hover .dropbtn { 
 
      background-color: #3e8e41; 
 
     } 
 
    </style> 
 
<body> 
 
<div id="whatever"> 
 
    <span class="test">Something</span> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn">ULL</button> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn" style="position: absolute;top: 26px;left: 50px;">ULL</button> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 

 
    </div> 
 
    <span class="test">Something</span> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn" style="position: absolute;top: 26px;left: 410px;">ULL</button> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn" style="position: absolute;top: 26px;left: 450px;">ULL</button> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
     </div> 
 
     <span class="test">Something</span> 
 
     <div class="dropdown"> 
 
      <button class="dropbtn" style="position: absolute;top: 26px;left: 820px;">ULL</button> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Link 1</a> 
 
       <a href="#">Link 2</a> 
 
       <a href="#">Link 3</a> 
 
      </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
      <button class="dropbtn" style="position: absolute;top: 26px;left: 860px;">ULL</button> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Link 1</a> 
 
       <a href="#">Link 2</a> 
 
       <a href="#">Link 3</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-03-29 17:58:10

これは現在のMahdyar Iraniに近いソリューションですが、私はBefoeと書いてありますが、Somethingというタイトルの下では、2つのULLサブメニューが必要です。 – CSSNoob

これは終わりです：）...あなたは中間のタイトルのサブメニューを持っていません。メニューはすべて左側に開きます。まだ作業が必要ですが、努力していただきました:)。 – CSSNoob

ドロップダウン・コンテンツのテキスト・アラインメントはすべて中央を意味しますか？ –

ドロップダウンメニューallign

答えて

関連する問題