시간의 상단에 드롭 다운 메뉴를 배치하십시오

나는 너희들이 다음 일로 나를 도울 수 있기를 바랍니다. 나는 웹 사이트의 상단을 만들었다. 내비게이션을 가리키면 드롭 다운 메뉴가 표시됩니다. 불행히도이 드롭 다운은 1 시간 미만입니다. 어떻게하면 시간의 맨 위에 위치시킬 수 있을까요? 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>

출처

2017-11-30 Lea

당신은 시간보다 메뉴의 Z- 인덱스가 높은 설정하고이 위에 대신 뒤에 나타납니다. 이 이미지가 작동하는지 아닌지를 알기 위해 이미지를 볼 수는 없지만해야합니다.

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

출처

2017-11-30 15:29:38 Scath

이것은 나를 위해 일했습니다! 너무 감사합니다! – Lea

시간의 상단에 드롭 다운 메뉴를 배치하십시오

답변

관련 문제