我的菜單隱藏在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將被隱藏或不工作

回答

相關問題