首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML CSS下拉列表怎么显示在最前面

2012-04-07 
求助:HTML CSS下拉列表如何显示在最前面?高手们求救呀~~!!!鼠标停留在HO后,弹出列表,当选择后几个月的时候

求助:HTML CSS下拉列表如何显示在最前面?
高手们求救呀~~!!!
鼠标停留在HO后,弹出列表,当选择后几个月的时候,就弹出到下一行的列表了,这个在哪里设置一下呀?多谢各位了!!!

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Report</title>    <style type="text/css">  *{margin:0;padding:0;}   .menu{    font-size:12px;    position:relative;    z-index:100;    background-color: #FFFFFF;}   .menu ul{list-style:none;}   .menu li {float:left;position:relative;}   .menu ul ul {    visibility:hidden;    position:absolute;    left:3px;    top:23px;    vertical-align: text-top;    clear: both;    list-style-position: outside;    display: table;}   .menu table {position:absolute; top:0; left:0;}   .menu ul li:hover ul,   .menu ul a:hover ul{visibility:visible;}   .menu a{display:block;border:1px solid #aaa;background:blue;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}   .menu a:hover{background:#f2cdb0;color:#f00;border:1px solid blue;}   .menu ul ul{}   .menu ul ul li {    clear:both;    text-align:left;    font-size:12px;}   .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid blue;}   .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}   </style>  </head>    <body>     <div class="menu">      <ul>          <li><a href="">HO<!--[if IE 7]><!--></a><!--<![endif]-->              <!--[if lte IE 6]><table><tr><td><![endif]-->              <ul>                  <li><a href="CN Tool_Kacey_v3_201201.xls">Jan</a></li>                  <li><a href="CN Tool_Kacey_v3_201202.xls">Feb</a></li>                  <li><a href="CN Tool_Kacey_v3_201203.xls">Mar</a></li>                  <li><a href="CN Tool_Kacey_v3_201204.xls">Apr</a></li>                  <li><a href="CN Tool_Kacey_v3_201205.xls">May</a></li>                  <li><a href="CN Tool_Kacey_v3_201206.xls">Jun</a></li>                  <li><a href="CN Tool_Kacey_v3_201207.xls">Jul</a></li>                  <li><a href="CN Tool_Kacey_v3_201208.xls">Aug</a></li>                  <li><a href="CN Tool_Kacey_v3_201209.xls">Sep</a></li>                  <li><a href="CN Tool_Kacey_v3_201210.xls">Oct</a></li>                  <li><a href="CN Tool_Kacey_v3_201211.xls">Nov</a></li>                  <li><a href="CN Tool_Kacey_v3_201212.xls">Dec</a></li>              </ul>              <!--[if lte IE 6]></td></tr></table></a><![endif]-->          </li>          <li><a href="">EA</a></li>         <li><a href="">NA</a></li>          <li><a href="">SA</a></li>      </ul>  </div>    <p> sdfsd</p>    <p> sdfsdf</p>    <div class="menu">      <ul>          <li><a href="">HO<!--[if IE 7]><!--></a><!--<![endif]-->              <!--[if lte IE 6]><table><tr><td><![endif]-->              <ul>                  <li><a href="CN Tool_Kacey_v3_201201.xls">Jan</a></li>                  <li><a href="CN Tool_Kacey_v3_201202.xls">Feb</a></li>                  <li><a href="CN Tool_Kacey_v3_201203.xls">Mar</a></li>                  <li><a href="CN Tool_Kacey_v3_201204.xls">Apr</a></li>                  <li><a href="CN Tool_Kacey_v3_201205.xls">May</a></li>                  <li><a href="CN Tool_Kacey_v3_201206.xls">Jun</a></li>                  <li><a href="CN Tool_Kacey_v3_201207.xls">Jul</a></li>                  <li><a href="CN Tool_Kacey_v3_201208.xls">Aug</a></li>                  <li><a href="CN Tool_Kacey_v3_201209.xls">Sep</a></li>                  <li><a href="CN Tool_Kacey_v3_201210.xls">Oct</a></li>                  <li><a href="CN Tool_Kacey_v3_201211.xls">Nov</a></li>                  <li><a href="CN Tool_Kacey_v3_201212.xls">Dec</a></li>              </ul>              <!--[if lte IE 6]></td></tr></table></a><![endif]-->          </li>          <li><a href="">EA</a></li>         <li><a href="">NA</a></li>          <li><a href="">SA</a></li>       </ul> </div></body>  </html> 



[解决办法]
把你问题说明白一点。。
<ul>
<li><a href="CN Tool_Kacey_v3_201201.xls">Jan</a></li>
<li><a href="CN Tool_Kacey_v3_201202.xls">Feb</a></li>
<li><a href="CN Tool_Kacey_v3_201203.xls">Mar</a></li>
<li><a href="CN Tool_Kacey_v3_201204.xls">Apr</a></li>
<li><a href="CN Tool_Kacey_v3_201205.xls">May</a></li>
<li><a href="CN Tool_Kacey_v3_201206.xls">Jun</a></li>
<li><a href="CN Tool_Kacey_v3_201207.xls">Jul</a></li>
<li><a href="CN Tool_Kacey_v3_201208.xls">Aug</a></li>
<li><a href="CN Tool_Kacey_v3_201209.xls">Sep</a></li>
<li><a href="CN Tool_Kacey_v3_201210.xls">Oct</a></li>
<li><a href="CN Tool_Kacey_v3_201211.xls">Nov</a></li>
<li><a href="CN Tool_Kacey_v3_201212.xls">Dec</a></li>
</ul>
自己看这些代码。。当你点击哪个月的时候直接跳转了。。。
[解决办法]
楼主问题解决了没?
感觉用z-index属性可以解决,
把上下两个menu用的不同的id(menu1、menu2),然后给第一个menu设较大的z-index值可以。这个我试过了。
更细致的改各个选项的z-index属性,应该可以更好地实现你的要求,但我也初学,试了几个方法都没成功。

[解决办法]
在第二个menu上手动改动一下z-index为一个小于第一个的值就行,比如99。如下:

<div class="menu">
...
</div>
<p> sdfsd</p>
<p> sdfsdf</p>
<div class="menu" style="z-index:99"> 
...
</div>

你试试看。

热点排行