日期:2014-05-17  浏览次数:20587 次

跪求来看看啊,在线等
首先,您别嫌代码长啊,其实很简单,两段,一段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>