跪求来看看啊,在线等
首先,您别嫌代码长啊,其实很简单,两段,一段html,一段css,求各位了
网页的导航条在ie里正常显示,可是在ff中就消失,鼠标滑过那里是block出现
代码如下:
css代码:
nav{
margin-bottom:10px;
width:990px;
line-height:30px;
list-style-type:none;
background-image:url(../images/search_bg.jpg); /* 定义盒子的宽高及背景图片*/
}
#nav a
{
font-size :14px; /* 定义超链接未访问的时候状态*/
display:block;
width:165px;
text-align:center;
}
#nav a:link{ /* 定义超链接样式*/
color:#fff;
text-decoration:none;
}
#nav a:visited{ /* 定义超链接访问过后的状态*/
color:#fff;
text-decoration:none;
}
#nav a:hover{ /* 定义鼠标滑过超链接时候状态*/
background-image:url(../images/a_hover.jpg);
text-decoration:none;
font-weight:bold;
color:Blue;
}#nav li{
float:left;
width:160px;
}
#nav li a:hover{ /* 定义列表里超链接鼠标滑过整块li的时候状态*/
background-color:Green;
}
#nav li ul{ /* 定义下拉菜单的状态*/
line-height:24px;
list-style-type:none;
text-align:left;
left:-999em;/*这句就是关键的隐藏下拉菜单,也可以使用display:none的方法*/
width:165px;
position:absolute;
}
#nav li ul li{ /*顶一下拉菜单中的li的状态*/
float:left;
width: 165px;
background:#4490CE
}
#nav li ul a{ /*定义下拉菜单中超链接标签未访问的状态*/
display:block;
width:165px;
text-align:center;
}#nav li ul a:link{ /*定义超链接项的状态*/
color:#000;
text-decoration:none;
}
#nav li ul a:visited{ /*定义超链接项访问后的状态*/
color:#000;
text-decoration:none;
}
#nav li ul a:hover{ /*定义超链接项访问中的状态*/
color:#fff;
text-decoration:none;
font-weight:normal;
background:#000;
}#nav li:hover ul{
left:auto;
}
#nav li.sfhover ul{
left:auto;
}
html代码:
<div class="bar">
<ul id="nav">
<li ><a href="Default.aspx" style="width: 164px">首页</a>
</li>
<li><a href="brief.aspx">关于网能达</a>
<ul>
<li style="left: 0px; top: 0px"><a href="brief.aspx">公司简介</a></li>
<li><a href="culture.aspx"> 企业文化</a></li>
<li><a href="talk.aspx";>咨询反馈</a></li>
<li><a href="adminlogin.aspx";>进入后台</a></li>
</ul>
</li>
<li><a href="com_progress.aspx">公司动态</a>
<ul>
<li><a href="com_progress.aspx">发展进程</a></li>
<li><a href="future.aspx">未来规划</a></li>
</ul>
</li>
<li><a href="product.aspx";>产品介绍</a>
<ul>
<li><a href="product.aspx";>产品展示</a></li>
<li><a href="product/pro.aspx";>资质证书</a></li>
</ul>
</li>
<li><a href="coorperation.aspx" style="width: 159px">商务合作</a>
<ul>
<li><a href="coorperation.aspx">合作信息</a></li>
<li><a href="coorperation.aspx">联系方式</a></li>