Question

我一直在尝试创建一个带有下拉菜单的导航栏。经过几个小时的查看后发现问题是当光标向下移动到下方的下一个div时，它就消失了。我一直在尝试，但无法弄清楚如何解决它。

页面html是：

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>E-book</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/button.css" rel="stylesheet" type="text/css">
<link href="../css/dropdown.css" rel="stylesheet" type="text/css">
<script src="../script/script.js"></script>

</head>

<body>
<div class="wrapper">
    <div class="header">
        <span><h1>AS Level E-Book</h1></span>
    </div>
<div class="nav-wrapper">
    <nav class="menu-wrap">
        <ul>
            <li><a href="#!">Introduction</a></li>
            <li><a href="#!">Online Services</a>
                <ul>
                    <li><a href="#!">E-Mail</a></li>
                    <li><a href="#!">Social Network</a></li>
                    <li><a href="#!">Instant Messaging</a></li>
                </ul>
            </li>
            <li><a href="#!">Life In Info Age</a></li>
            <li><a href="#!">Digital Divide</a></li>
            <li><a href="#!">Conclusion</a></li>
        </ul>
    </nav>
</div>

        <div class="main"><!-- TemplateBeginEditable name="next and prev" -->
        <a><button class="metal radial"><=</button></a>
        <a><button class="metal radial">=></button></a>
        <!-- TemplateEndEditable --></div>
        <div class="cont"><!-- TemplateBeginEditable name="content" -->
        content

        <!-- TemplateEndEditable -->

        </div>
</div>
</body>
</html>

和css是：

.nav-wrapper{
    position:absolute; top: 100px; right: 0; left: 0;
    background: linear-gradient(to right, #aaa , #aaa, #ddd, #ddd, #aaa,#aaa);

    }


nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

nav a:hover {
  background-color: #005f5f;
}

nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}


nav li li {
  font-size: .8em;
}

 nav li {
    width: 250px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
}

nav a {
    border-bottom: none;
}

nav > ul > li {
    text-align: center;
}

nav > ul > li > a {
    padding-left: 0;
}


nav li ul {
    position: absolute;
    display: none;
    width: inherit;
}

nav li:hover ul {
    display: block;
}

nav li ul li {
    display: block;
}

任何帮助将不胜感激感谢

Answer 1

将高（呃）z-index添加到：

// Untested
NSArray *array = [dataSource.areaData GetPDFFileData:@""];
for (NSDictionary *dict in array) {
    NSString *base64 = dict[@"data"];
    NSData *data = [[NSData alloc] initWithBase64EncodedString:base64
                                                       options:0];
    // Do something with data?
}

关于z-index：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

演示：https://jsfiddle.net/0cd16xjj/1/

css导航下拉菜单消失在较低的div上

1 个答案: