没有JavaScript的下拉菜单 [英] Dropdown menu without javascript
本文介绍了没有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;宽度:200px;填充:0; display:none;}#menu ul li {float:none;保证金:0;填充: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;文字修饰:无;颜色:#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 =#>编程语言< / 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>< a href =#>数据库< / 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>< a href =#>帮助< / a>< / li>< / ul>
I have a menu with tabs, and on hover of a tab a list of things appear at the bottom of the tab. Then, I wanted to do that the list of thing go down with a transition( before it was display:block). My problem is that when the transition will start, the top of the list must be a certain multiplication ( the width of a tab * the number of tabs ). But I don't want any javascript.
Is there a way to do that ?
解决方案
it is my sample of css dropdown menu: i hope be useful:
in HTML, and 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>
这篇关于没有JavaScript的下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文