Question

您好我正在创建一个母版页。在主页面中，我创建了一个带有jquery和css的下拉菜单，它在某些页面中工作正常，但隐藏在某些页面中，这些页面包含div.it正在div下工作，所以它在某些页面中不可见。我附加CSS和HTML代码。在母版页菜单的情况下工作正常，但适用.aspx页面正在工作，但它隐藏在div内。

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;
}

语言：lang-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>

Answer 1

在css中使用z-index属性来管理元素堆栈的顺序，即哪个元素应该出现在另一个元素之上，为要在顶部显示的元素提供更高的值。

scores[i]

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

祝你好运

Answer 2

您可以设置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>

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

2 个答案: