我的菜单隐藏在DIV后面。 t将被隐藏或不工作

你好，我正在创建一个母版页。在一个母版页我创建一个下拉菜单与jQuery和css它在一些页面中工作正常，但隐藏在某些页面这些页面包含一个div.it工作在div下面所以它不是visibile在一些pages.here我附上CSS和HTML code.in母版页菜单的情况下工作正常，但适用.aspx页面正在工作，但它隐藏在一个div内。我的菜单隐藏在DIV后面。 t将被隐藏或不工作

body 
{ 
    font-size: 0.85em; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
} 

#nav, #nav ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-position: outside; 
    position: relative; 
    line-height: 1.5em; 
} 

#nav a 
{ 
    display: block; 
    padding: 0px 5px; 
    border: 1px solid #333; 
    color: #fff; 
    text-decoration: none; 
    background: #595651; 
} 

#nav a:hover 
{ 
    background-color: #fff; 
    background: #F86000; 
} 

#nav li 
{ 
    float: left; 
    position: relative; 
} 

#nav ul 
{ 
    position: absolute; 
    display: none; 
    width: 12em; 
    top: 1.5em; 
} 

#nav li ul a 
{ 
    width: 12.8em; 
    height: auto; 
    float: left; 
} 

#nav ul ul 
{ 
    top: auto; 
} 

#nav li ul ul 
{ 
    left: 12em; 
    margin: 0px 0 0 10px; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul 
{ 
    display: none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul 
{ 
    display: block; 
}

语言：在CSS郎-HTML

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="adminmenu.ascx.cs" Inherits="UserControls_adminmenu" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="../MainStyles/Menu3.css" rel="stylesheet" type="text/css" /> 
    <script type='text/javascript' src="../Jquery/jquery-1.2.3.min.js"></script> 
    <script type='text/javascript' src="../Jquery/menu.js"></script> 
    <link href="../MainMenucss/MaimSlideMenu.css" rel="stylesheet" type="text/css" /> 
</head> 
<ul id="nav"> 
    <li><a href="">Operation</a> 
     <ul> 
      <li><a href="#">Transmittal Operations</a> 
       <ul> 
        <li><a href="#">New Internal Transmittal</a></li> 
        <li><a href="#">New External Transmittal</a></li> 
        <li><a href="#">Issued Deliverables(External Docs)</a></li> 
        <li><a href="#">Non Deliverable Transmittal</a></li> 
        <li><a href="#">Transmittal logout</a></li> 
       </ul> 
      </li> 
      <li><a href="#">General Document Manager</a></li> 
      <li><a href="#">Forward Transmittal Mails</a></li> 
      <li><a href="#">Editor Projects</a></li> 
      <li><a href="#">Hard Copy management</a> 
       <ul> 
        <li><a href="#">Hard Copy Issue Register</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Master</a> 
     <ul> 
      <li><a href="#">General Metadata</a></li> 
      <li><a href="#">Phase Specific MetaData</a></li> 
      <li><a href="#">Permission settings</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Help</a></li> 
</ul>

来源

2016-03-02 Santosh Kumar Bind

使用Z-index属性来管理元件叠层的顺序，即该元件应出现在另一个的顶部，给您想要在顶部显示更高的值。

div { z-index: 500;} 
ul { z-index: 1000;}

这将使ul元素出现在div元素的顶部，如果它们重叠。

好运

来源

2016-03-02 06:03:11

先生，感谢它工作正常 –

您可以设置的z-index值设置在哪些元素堆叠在屏幕顺序。

z-index属性指定元素及其后代的z顺序。当元素重叠时，z顺序决定哪一个覆盖另一个。具有较大z-索引的元素通常覆盖较低元素的元素。

阅读关于Mozilla Developer Network的完整文章。

#nav, 
 
#nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    list-style-position: outside; 
 
    position: relative; 
 
    line-height: 1.5em; 
 
} 
 
#nav a { 
 
    display: block; 
 
    padding: 0px 5px; 
 
    border: 1px solid #333; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    background: #595651; 
 
} 
 
#nav a:hover { 
 
    background-color: #fff; 
 
    background: #F86000; 
 
} 
 
#nav li { 
 
    float: left; 
 
    position: relative; 
 
} 
 
#nav ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: 12em; 
 
    top: 1.5em; 
 
} 
 
#nav li ul a { 
 
    width: 12.8em; 
 
    height: auto; 
 
    float: left; 
 
} 
 
#nav ul ul { 
 
    top: auto; 
 
} 
 
#nav li ul ul { 
 
    left: 12em; 
 
    margin: 0px 0 0 10px; 
 
} 
 
#nav li:hover ul ul, 
 
#nav li:hover ul ul ul, 
 
#nav li:hover ul ul ul ul { 
 
    display: none; 
 
} 
 
#nav li:hover ul, 
 
#nav li li:hover ul, 
 
#nav li li li:hover ul, 
 
#nav li li li li:hover ul { 
 
    display: block; 
 
} 
 

 
#nav li > ul { 
 
    z-index: 1 
 
}

<ul id="nav"> 
 
    <li><a href="">Operation</a> 
 
    <ul> 
 
     <li><a href="#">Transmittal Operations</a> 
 
     <ul> 
 
      <li><a href="#">New Internal Transmittal</a> 
 
      </li> 
 
      <li><a href="#">New External Transmittal</a> 
 
      </li> 
 
      <li><a href="#">Issued Deliverables(External Docs)</a> 
 
      </li> 
 
      <li><a href="#">Non Deliverable Transmittal</a> 
 
      </li> 
 
      <li><a href="#">Transmittal logout</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">General Document Manager</a> 
 
     </li> 
 
     <li><a href="#">Forward Transmittal Mails</a> 
 
     </li> 
 
     <li><a href="#">Editor Projects</a> 
 
     </li> 
 
     <li><a href="#">Hard Copy management</a> 
 
     <ul> 
 
      <li><a href="#">Hard Copy Issue Register</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

来源

2016-03-02 06:09:59 niyasc

我的菜单隐藏在DIV后面。 t将被隐藏或不工作

回答

相关问题