如何使用我的CSS製作CSS下拉菜單？

Question

我遇到了我的代碼問題。我有一個標題（簡單但不錯），所以我不想改變我的代碼來添加一個下拉菜單。我不使用列表，因爲大多數人都在他們的下拉菜單中使用列表，我不想使用列表。

這裏是我的代碼：

<!-- Navigation Bar --> 

<div class="navbar"> 
    <div class="button_l"><a href="Main_Page.html"> Home </a></div> 
    <div class="button"><a href="About.html"> About </a></div> 
    <div class="button"><a href="History.html"> History </a></div> 
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div> 
    <div class="button_r"><a href="#"> Yeah </a></div> 
</div> 

這裏是CSS與它去：

.navbar { 
width: 90%; 
height: 30px; 
font-family: 'Press Start 2P', cursive; 
font-size: 15px; 
line-height: 25px; 
position: absolute; 
border: 2px solid; 
border-radius: 250px; 
background: url("../images/navbar.png") repeat-x; 
margin-left: 50px; 
} 

.button a { 
float: left; 
width: 20%; 
height: 30px; 
text-align: center; 
text-decoration: none; 
} 

.button_l a { 
float: left; 
width: 20%; 
height: 30px; 
text-align: center; 
text-decoration: none; 
} 

.button_r a { 
float: left; 
width: 20%; 
height: 30px; 
text-align: center; 
text-decoration: none; 
} 

.button a:hover { 
float: left; 
color: #fff; 
width: 20%; 
height: 30px; 
text-align: center; 
text-decoration: none; 
background: url("../images/navbar_roll.png") repeat-x; 
} 

.button_l a:hover { 
float: left; 
color: #fff; 
width: 20%; 
height: 30px; 
text-align: center; 
text-decoration: none; 
border-top-left-radius: 250px; 
border-bottom-left-radius: 250px; 
background: url("../images/navbar_roll.png") repeat-x; 
} 

.button_r a:hover { 
float: left; 
color: #fff; 
width: 20%; 
height: 30px; 
text-align: center; 
text-decoration: none; 
border-top-right-radius: 250px; 
border-bottom-right-radius: 250px; 
background: url("../images/navbar_roll.png") repeat-x; 
} 

我用button_l左按鈕，按鈕中間的三個按鈕，並button_r爲正確的按鈕。我更喜歡「分解」按鈕能夠有一個下拉菜單，可能有兩三頁。如何在不製作ul和li標籤的情況下做到這一點？

謝謝

另外，請不要javascript。只需簡單純粹的HTML和CSS。

Answer 1

你可以做這樣

<div class="navbar"> 
    <div class="button button_l"><a href="Main_Page.html"> Home </a><div class="sub-menu">Menu here</div></div> 
    <div class="button"><a href="About.html"> About </a></div> 
    <div class="button"><a href="History.html"> History </a></div> 
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div> 
    <div class="button button_r"><a href="#"> Yeah </a></div> 
</div> 

添加以下CSS

.button { 
    position:relative; 
} 
.sub-menu { 
    position:absolute; 
    top:100%; 
    left:-10000px; 
} 
.button:hover .sub-menu { 
    left:0; 
} 

應該是這樣的http://jsfiddle.net/ryJT4/1/

Answer 2

語義上說，這將是更好地使用nav而不是div與每個項目的無序列表。然後您可以使用li的懸停輕鬆切換subnav的顯示。喜歡的東西：

標記

<nav> 
    <ul> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li> 
      <a href="#">Three</a> 
      <ul> 
       <li><a href="#">Four</a></li> 
       <li><a href="#">Five</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

樣式

li { 
    float: left; 
    position: relative; 
    margin-right: 20px; 
} 
ul ul { 
    display: none; 
    position: absolute; 
    bottom: 1em; 
} 
ul li:hover ul { 
    display: block; 
} 

Answer 3

你可以找到一個響應，2級純HTML/CSS下拉這裏：

http://codepen.io/manik314/pen/BaqrI