将下拉菜单放置在小时的顶部
Position a drop-down menu on top of an hr
我希望你们能帮助我完成接下来的事情。我做了一个网站的顶部。当您悬停导航时,将显示一个下拉菜单。不幸的是,这个下拉菜单位于 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>
您可以将菜单的 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;
}
我希望你们能帮助我完成接下来的事情。我做了一个网站的顶部。当您悬停导航时,将显示一个下拉菜单。不幸的是,这个下拉菜单位于 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>
您可以将菜单的 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;
}