我有一个带css文件的下拉菜单,我想把它转换成Verctical菜单我尝试了很多,但我可以做到这一点请任何人帮助我Folowing是我的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;
// -->
更新
我想要这样
答案 0 :(得分:0)
试试这个:
#sddmT li {margin:0; 填充:0; list-style:none; 位置:静态的; font:bold 11px arial; }
答案 1 :(得分:0)
我知道这是一篇旧帖子,但我不禁注意到你的主菜单和子菜单之间有一些空白。使用它们指向的项目包装子菜单将起作用,但您需要消除空白,或者每次打开菜单时都会触发关闭/退出功能。
margin: 0 1px 0 0
vs margin:0
。