Açılır menüler allign

Her "Bir Şey" altında, yan yana iki alt menü bulunmalıdır. Kahretsin, saatlerce bununla uğraşıyorum.Açılır menüler allign

Benim HTML'im şimdiye kadar.

<!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>

Yani temelde, sen, ben başka alt menüye sonraki ULL eklemem gerekiyor görebilir ve ben bir şey başlığı

kaynak

2016-03-29 CSSNoob

yardımcı olabilecek geçerli HTML yapma; -) Şu anda, '

'için bir kapanış'

'eksik. – Carpetsmoker

Tnx ... şimdi bitti, ama yine de benim sorunum çözülmedi :) – CSSNoob

Soruyu güncellenmiş kodla düzenlemeniz gerekiyor. – Carpetsmoker

(Son Sürüm) Notlar altında aynı yapmanız gereken gibidir:

yazma 0 yerine 0px
açık vücut etiketi kıç Kod er diğer ull düğmeleri

İşte

için kafa etiketi

yakın div etiketi

seti pozisyon kapalı olduğu:

<!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>

kaynak

2016-03-29 17:58:10

Tamam, bu şimdi Mahdyar Irani'nin çözümüne daha yakın, ama ben de I be be be be Bees, her Something unvanı altında birbirine 2 ULL submenus nex'e ihtiyacım var. – CSSNoob

Bu yakın:) ... orta başlık ve alt menüleri sol tarafta açık olan alt menüleri yok ... hala biraz çalışmaya ihtiyacım var, ama bu çabayı takdir ettim :). – CSSNoob

Tüm açılır menü içeriğinin metni hizalanmış mıdır? –

Açılır menüler allign

cevap

İlgili konular