将下拉菜单放置在小时的顶部

Question

我希望你们能帮助我完成接下来的事情。我做了一个网站的顶部。当您悬停导航时，将显示一个下拉菜单。不幸的是，这个下拉菜单位于 hr 之下。我如何修复它以使其位于小时之上？ hr 是必需元素，因此我无法将其删除。 Here is the example of the problem Html代码：

@import url('https://fonts.googleapis.com/css?family=Lato:300i,400,400i,700,900');

html {
    box-sizing: border-box;
}

body {
    font: 15px 'Lato', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    margin: auto;
    max-width: 1024px;
    width: 100%;
    overflow: hidden;
}

hr {
    border-color: #b9b9b9;
    position: absolute;
    width: 100%;
    margin-top: -55.5%;
}

header {
    width: 80%;
    margin-left: 10%;
}

header img {
    width: 15%;
    height: auto;
}

img {
    width: 100%;
    height: auto;
    margin: -1% 0 0.5% 0;
}

h1 {
    display: none;
}

nav {
    float: right;
    padding: 2% 0 5% 0;
}

li {
    display: inline-block;
    position: relative;
    padding: 10px 0px 0px 0px;
    margin-left: 10px;
}

header a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    color: black;
    font-weight: 400;
}

ul ul {
    position: absolute;
    left: 0;
    top: 100%;
    display: none;
    padding: 1% 0;
}

li:hover ul {
    display: block;
    background-color: gainsboro;
}

ul ul a {
    color: white;
}

.selected {
    border-bottom: 2px solid #49997b;
    padding-bottom: 0.5%;
}

<!DOCTYPE html>
<html lang="nl">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vakantie op de Dominicaanse Republiek</title>
    <link rel="stylesheet" href="CSS/vakantie.css" type="text/css">
    <link rel="stylesheet" href="CSS/normalize.css" type="text/css">
   </head>     
  <body>
    <div class="container">
     <header>
       <h1>Vakantie op de Dominicaanse republiek</h1>
           <nav>
               <ul>
                   <li class="selected"><a href="home.html">Home</a></li>
                   <li><a href="Bezienswaardigheden.html">Bezienswaardigheden</a></li>
                   <li><a href="Over_de_Dominicaanse.html">Over de Dominicaanse</a>
               <ul>
                    <li><a href="Over_de_Dominicaanse2.html#paspoort">Reisdocumenten</a></li>
                    <li><a href="Over_de_dominicaanse2.html#inentingen">Inentingen</a></li>
                    <li><a href="Over_de_dominicaanse2.html#feestdagen">Feestdagen</a></li>
                    <li><a href="Over_de_dominicaanse2.html#geld">Geld en koers</a></li>
               </ul>
                    </li>
                    <li><a href="Recreatie.html">Recreatie</a></li>
                    <li><a href="Contact.html">Contact</a></li>
               </ul>
            </nav>
          </header>
         <img src="Afbeeldingen/Dominicaanse_header.jpg" alt="dominicaanse">
        <hr>
     </div>
  </body>
</html>

Answer 1

您可以将菜单的 z-index 设置为高于 hr，它应该出现在顶部而不是后面。我看不到图像来判断这是否有效，但它应该。

hr {
    border-color: #b9b9b9;
    position: absolute;
    width: 100%;
    margin-top: -55.5%;
    z-index: 1;
}

.container {
    margin: auto;
    max-width: 1024px;
    width: 100%;
    overflow: hidden;
     z-index: 2;
}

将下拉菜单放置在小时的顶部

Position a drop-down menu on top of an hr

hover

positioning