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>