沒有javascript的下拉菜單

Question

我有一個帶有選項卡的菜單，並且在選項卡上懸停時，選項卡的底部會顯示一個列表。然後，我想這樣做，事情的列表隨着過渡（在顯示：塊之前）而下降。我的問題是，當轉換開始時，列表的頂部必須是特定的乘法（選項卡的寬度*選項卡的數量）。但我不想要任何JavaScript。

有沒有辦法做到這一點？

Answer 1

這是我的CSS下拉菜單的示例：我希望是有用的：

在HTML

，和CSS：

#menu, #menu ul 
 
{ 
 
\t list-style: none; 
 
\t border: 1px solid #000; 
 
\t background-color: #ecffec; 
 
\t padding: 0 0 26px 0; 
 
\t margin: 0; 
 
} 
 
#menu li 
 
{ 
 
\t float: left; 
 
\t margin-right: 3px; 
 
\t border: 1px solid #ecffec; 
 
\t position: relative; 
 
} 
 
#menu ul 
 
{ 
 
\t position: absolute; 
 
\t top: 25px; 
 
\t left: -1px; 
 
\t width: 200px; 
 
\t padding: 0; 
 
\t display: none; 
 
} 
 
#menu ul li 
 
{ 
 
\t float: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t line-height: 15px; 
 
} 
 
#menu a:link, #menu a:visited 
 
{ 
 
\t display: block; 
 
\t font-family: Tahoma; 
 
\t font-size: 0.75em; 
 
\t font-weight: bold; 
 
\t text-align: left; 
 
\t text-decoration: none; 
 
\t color: #000; 
 
\t padding: 5px; 
 
} 
 
#menu li:hover 
 
{ 
 
\t background-color: #ffd98a; 
 
\t border: 1px solid #000; 
 
} 
 
#menu li:hover ul 
 
{ 
 
\t display: block; 
 
}

<ul id="menu"> 
 
    <li><a href="#">Programming Language</a> 
 
    <ul> 
 
     <li><a href="#">Java</a></li> 
 
     <li><a href="#">PHP</a></li> 
 
     <li><a href="#">Python</a></li> 
 
     <li><a href="#">Asp Classic</a></li> 
 
     <li><a href="#">ASP.NET</a></li> 
 
     <li><a href="#">javascript</a></li> 
 
     <li><a href="#">Perl</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Database</a> 
 
    <ul> 
 
     <li><a href="#">SQL Server 2005</a></li> 
 
     <li><a href="#">Oracle</a></li> 
 
     <li><a href="#">MySQL</a></li> 
 
     <li><a href="#">DB2</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Help</a></li> 
 
</ul>