无JavaScript的下拉菜单(Dropdown menu without javascript)

我有一个选项卡的菜单，并在标签的悬停的事情的清单出现在标签的底部。然后，我想这样做的事情列表下井带的转换（这是之前显示：块）。我的问题是：当过渡将启动，该列表的顶部必须有一定的乘法（选项卡*标签数量的宽度）。但我不希望有任何的JavaScript。

有没有办法做到这一点？

这是我的CSS下拉菜单的示例：我希望是有用的：

在HTML和CSS：

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