我在做一个关于下拉框的一个效果类似于163里面点击按钮出来下拉框可以查看未读邮件和以读邮件,我的问题主要就是弹出来的那个下拉框的边框最底下的那个不变颜色,也就是border-bottom:red 1px solid;只有当我把css里面的display:none去掉才可以,可是我这里不能去掉的,不然就下拉就不行了
源码:.menuss { float:left; margin-left:157px;
BORDER-RIGHT: 2px outset; PADDING-RIGHT: 15px; display:none; height:50px; border-right:red 1px outset; BORDER-TOP: red 1px outset; PADDING-LEFT: 15px; background-color:White; PADDING-BOTTOM: 6px; BORDER-LEFT:red 1px outset; WIDTH: 70px; PADDING-TOP: 15px; BORDER-BOTTOM:red 1px outset; POSITION: absolute; TOP: 260px
}<DIV class="menuss" id="menu_1" onclick="keepMenu(this)" align="left">
<div style="float:left; margin-left:-55px;">
<ul style="list-style-type:none;line-height:200%; float:left">
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgopen" alt="<%$Resources:Strings,literal800 %>" runat="server" src="../images/r4.png" onclick="fun('open')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">活动</div></font></li>
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgclose" runat="server" alt="<%$ Resources:Strings,literal801 %>" src="../images/r3.png" onclick="fun('close')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">拒绝</div></font></li>
</ul> <input id="h1" type="hidden" runat="server" value="../images/r4.png" /> <input id="h2" runat="server" type="hidden" value="../images/r3.png" /></div></DIV></tr>
源码:.menuss { float:left; margin-left:157px;
BORDER-RIGHT: 2px outset; PADDING-RIGHT: 15px; display:none; height:50px; border-right:red 1px outset; BORDER-TOP: red 1px outset; PADDING-LEFT: 15px; background-color:White; PADDING-BOTTOM: 6px; BORDER-LEFT:red 1px outset; WIDTH: 70px; PADDING-TOP: 15px; BORDER-BOTTOM:red 1px outset; POSITION: absolute; TOP: 260px
}<DIV class="menuss" id="menu_1" onclick="keepMenu(this)" align="left">
<div style="float:left; margin-left:-55px;">
<ul style="list-style-type:none;line-height:200%; float:left">
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgopen" alt="<%$Resources:Strings,literal800 %>" runat="server" src="../images/r4.png" onclick="fun('open')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">活动</div></font></li>
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgclose" runat="server" alt="<%$ Resources:Strings,literal801 %>" src="../images/r3.png" onclick="fun('close')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">拒绝</div></font></li>
</ul> <input id="h1" type="hidden" runat="server" value="../images/r4.png" /> <input id="h2" runat="server" type="hidden" value="../images/r3.png" /></div></DIV></tr>
代码测试是有边框的<style>
.menuss { float:left; margin-left:157px;
BORDER-RIGHT: 2px outset; PADDING-RIGHT: 15px; display:none; height:50px; border-right:red 1px outset; BORDER-TOP: red 1px outset; PADDING-LEFT: 15px; background-color:White; PADDING-BOTTOM: 6px; BORDER-LEFT:red 1px outset; WIDTH: 70px; PADDING-TOP: 15px; BORDER-BOTTOM:red 1px outset; POSITION: absolute; TOP: 260px
}
</style>
<input onclick="document.getElementById('menu_1').style.display='block'" value="显示" type="button">
<DIV class="menuss" id="menu_1" onclick="keepMenu(this)" align="left">
<div style="float:left; margin-left:-55px;">
<ul style="list-style-type:none;line-height:200%; float:left">
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgopen" alt="<%$Resources:Strings,literal800 %>" runat="server" src="../images/r4.png" onclick="fun('open')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">活动</div></font></li>
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgclose" runat="server" alt="<%$ Resources:Strings,literal801 %>" src="../images/r3.png" onclick="fun('close')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">拒绝</div></font></li>
</ul> <input id="h1" type="hidden" runat="server" value="../images/r4.png" /> <input id="h2" runat="server" type="hidden" value="../images/r3.png" /></div></DIV>
function menuControl(show)
{
window.event.cancelBubble=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numID=objID.substring(index+1,objID.length);
if(mainID=="menubar")
{
var obj=eval("menu_"+numID);
if(obj.style.display=="none")
eval("showMenu("+"menu_"+numID+")");
else
eval("hideMenu("+"menu_"+numID+")");
}
}
{
obj.style.display="block";
obj.style.clip="rect(0 0 0 0)";
nbottom=5;
displayMenu(obj);
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<style type="text/css">.menubar {
BORDER-RIGHT: 1px outset; BORDER-TOP: 1px outset; BACKGROUND: #0099cc; BORDER-LEFT: 1px outset; WIDTH: 100px; CURSOR: default; COLOR: yellow; BORDER-BOTTOM: 1px outset; POSITION: absolute; TOP: 10px; HEIGHT: 20px
}
.menu {
BORDER-RIGHT:red 2px outset; PADDING-RIGHT:15px; BORDER-TOP:red 2px outset; DISPLAY: none; PADDING-LEFT:15px; BACKGROUND: yellow; PADDING-BOTTOM:15px; BORDER-LEFT:red 2px outset; WIDTH: 140px; PADDING-TOP: 15px; BORDER-BOTTOM:red 2px outset; POSITION: absolute; TOP: 30px
}
.menu A {
COLOR: blue; TEXT-DECORATION: none
}
.menu A:hover {
COLOR: #ffffff
}
</style>
<script language="javascript">
function menuControl(show)
{
window.event.cancelBubble=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numID=objID.substring(index+1,objID.length);
if(mainID=="menubar")
{
var obj=eval("menu_"+numID);
if(obj.style.display=="none")
eval("showMenu("+"menu_"+numID+")");
else
eval("hideMenu("+"menu_"+numID+")");
}
}
var nbottom=0,speed=7;
function displayMenu(obj)
{
obj.style.clip="rect(0 100% "+nbottom+"% 0)";
nbottom+=speed;
if(nbottom<=100)
{
timerID=setTimeout("displayMenu("+obj.id+"),70");
}
else clearTimeout(timerID);
}
function showMenu(obj)
{
obj.style.display="block";
obj.style.clip="rect(0 0 0 0)";
nbottom=5;
displayMenu(obj);
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
function keepMenu(obj)
{
obj.style.display="block";
}
</script>
<table style="FONT-SIZE: 15px" cellSpacing="0" cellPadding="0" width="400" border="0">
<tbody>
<TR>
<TD width="20%">
<DIV class="menubar" id="menubar_1" onclick="menuControl(1)"
align="center" style="background-image:url('bg_btn.JPG')">教育网站 </DIV></TD>
<TD width="20%">
<DIV class="menubar" id="menubar_2" onclick="menuControl(1)"
align="center">电脑网站 </DIV></TD>
<TD width="20%">
<DIV class="menubar" id="menubar_3" onclick="menuControl(1)"
align="center">免费邮件 </DIV></TD>
<TD width="20%">
<DIV class="menubar" id="menubar_4" onclick="menuControl(1)"
align="center">其它网站 </DIV></TD></TR>
<TR>
<TD width="20%">
<DIV class="menu" id="menu_1" onclick="keepMenu(this)"
align="left"><ul><li style="background-color:red">aaaa</li><li>bbbbbb</li></ul></DIV></TD>
<TD width="20%">
<DIV class="menu" id="menu_2" onclick="keepMenu(this)"
align="left"><A
href="http://www.yesky.com/">天极网</A><BR><A
href="http://www.cfan.cn.net/">电脑爱好者</A><BR><A
href="http://www.intoweb.com.cn/">上网杂志</A> </DIV></TD>
<TD width="20%">
<DIV class="menu" id="menu_3" onclick="keepMenu(this)"
align="left"><A
href="http://www.163.com/">163电子邮件</A><BR><A
href="http://freemail.263.net/">首都在线</A><BR><A
href="http://www.21cn.com/">21CN电子邮件</A><BR><A
href="http://www.chinese.com/">炎皇在线</A> </DIV></TD>
<TD width="20%">
<DIV class="menu" id="menu_4" onclick="keepMenu(this)"
align="left"><A
href="http://www.sohu.com.cn/">搜狐</A><BR><A
href="http://www.yahoo.com/">雅虎</A><BR><A
href="http://www.cseek.com/">搜索客</A><BR><A
href="http://www.sina.com/">新浪网</A><BR><A
href="http://202.102.4.31/51windows/js/httP;//www.cqcas.edu.cn/user/sailing">远航网站</A>
</DIV></TD></TR></tbody></table>
</div>
</form>
</body>
</html>大侠们帮忙调试下