2011-10-09 65 views
0

我正在研究一个简单的css下拉菜单,当我将鼠标悬停在列表上时,下拉菜单显示,但是当我的鼠标移动到“#head”封套div列表关闭。当鼠标悬停在包围div上时,CSS下拉菜单不会显示

头div是包装菜单和我的标志和搜索栏。 内容div包装我的所有内容。

当有下面的“头”的div内容,说一个“内容”分区,然后在下拉列表中显示,直到我将光标移动超越了“头”的div

div#content{ 
    display:block; 
    width:972; 
    float:none; 
    position:relative; 
} 
#top_menu{ 
    float:right; 
    text-align: left; 
    width: 505px; 
    padding: 5px 0 0 0; 
    display: inline-block; 
} 

#top_menu ul{ 
    list-style-type:none; 
    float:right; 
} 
#top_menu ul li ul{ 
    display:none; 
} 
#top_menu ul li{ 
    float: left; 
    padding: 0 0 0 14px; 
    margin: 0; 
    width: auto; 
} 
#top_menu ul li:hover ul{ 
    display:block; 
    position:absolute; 
} 
#top_menu ul li:hover ul li{ 
    clear: left; 
} 
#top_menu a{ 
    display:block; 
} 



    <div id="head"> 
     <div id = "top_menu"> 
      <ul class="nav"> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="about.php">About</a> 
        <ul> 
         <li><a href="1.php">1</a></li> 
         <li><a href="2.php">2</a></li> 
         <li><a href="3.php">3</a></li> 
         <li><a href="4.php">4</a></li> 
         <li><a href="5.php">5</a></li> 
         <li><a href="6.php">6</a></li> 
        </ul> 
       </li> 
      </ul> 

     </div> 
     <div class="clear"></div> 
     <div class="search"> 
      <form action="search.php" method="post"> 
       <input type="text" maxlength="30" width="40" /> 
       <input type="submit" value="submit" /> 
      </form> 
      </div> 
    </div> 
+0

嗨,#头元素的CSS是什么,你可以得到一个副本上jsFiddle看? – MyStream

+2

其实你的代码工作正常:http://jsfiddle.net/2tRUt/3/ – Samich

回答

0

确定...我通过添加一个z-index来修复它,结果在div div下面的content div覆盖了下拉框。所以在CSS中,我只是补充说:z-index:1000,然后它的工作。谢谢大家。

+0

找到修复的好工作。标记你的答案是正确的。 –

相关问题