我有一个带有 css 文件的下拉菜单,我想将它转换成垂直菜单我尝试了很多但我可以做到这一点请任何人帮助我下面是我的 css 和 html 代码。任何人请告诉我我究竟缺少什么由于哪个菜单未转换
#sddmT
{ margin: 0;
padding: 0;
z-index: 30}
#sddmT li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddmT li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #4A617B;
color: White;
text-align: center;
text-decoration: none}
#sddmT li a:hover
{ background: #BDCFD6;
color:#4A617B
}
#sddmT div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #4A617B;
border: 1px solid #BDCFD6}
#sddmT div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #4A617B;
color: #BDCFD6;
font: 11px arial}
#sddmT div a:hover
{ background: #BDCFD6;
color: #4A617B}
而她是html代码
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">ETP</a>
<div id="m1" onmouseover="mcancelclosetime()" onclick="mclosetime()">
<a href="http://dashboard.shakarganj.com.pk/ca/sml1etp.php" target=_blank>ETP - Jhang</a>
<a href="http://dashboard.shakarganj.com.pk/ca/sml2etp.php" target=_blank>ETP - Bhone</a>
</div>
</li>
</ul>
这是我关闭和打开菜单项的 JS 代码
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'visible';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
//document.onclick = mclose;
// -->
更新日期 我想要这样
最佳答案
试试这个:
#sddmT li { margin: 0; padding: 0; list-style: none; position:static; font: bold 11px arial; }
关于css - 将下拉菜单转换为垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8890590/