드롭 다운 메뉴가 컨테이너 뒤에 숨겨집니다.

Question

문제는 선택 드롭 다운을 클릭 할 때마다 그 후에 <div> 뒤에 열리는 것입니다. Z- 인덱스를 시도했지만 작동하지 않았습니다.

문제

body { 
 
    font: 1.5em Arial; 
 
    background-image: url('prague2.jpeg'); 
 
    background-size: cover; 
 
} 
 

 
.top { 
 
    opacity: 0.8; 
 
    font-size: 65px; 
 
    font-family: Courier new; 
 
    text-align: center; 
 
    background: #EBA23C; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    float: right; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    float: left; 
 
    width: 200px; 
 
    height: 40px; 
 
    background-color: #F05050; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    line-height: 40px; 
 
    margin-right: 2px; 
 
} 
 

 
ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 

 
ul li a:hover { 
 
    background-color: #C6AEF0; 
 
} 
 

 
ul li ul li { 
 
    display: none; 
 
} 
 

 
ul li:hover ul li { 
 
    display: block; 
 
} 
 

 
.container { 
 
    line-height: 35px; 
 
    font-style: Lucida Console; 
 
    font-size: 22px; 
 
    opacity: 0.8; 
 
    background: #F0E3CA; 
 
    float: left; 
 
    width: 450px; 
 
    height: 630px; 
 
    border: 2px solid; 
 
    border-radius: 15px; 
 
} 
 

 
.container-inner { 
 
    border-radius: 15px; 
 
    background: #F05050; 
 
    text-align: center; 
 
    width: 450px; 
 
    height: 40px; 
 
    float: left; 
 
    border: 2px solid; 
 
} 
 

 
.container2 { 
 
    background-color: #ccc; 
 
    width: 650px; 
 
    margin-left: 780px; 
 
    margin-top: 30px; 
 
    font-size: 50px; 
 
    font-family: Courier New; 
 
    opacity: 0.7; 
 
    text-align: center; 
 
    border: dashed; 
 
} 
 

 
.bachelor { 
 
    font-size: 40px; 
 
    background-color: #ccc; 
 
    border: 2px solid; 
 
    width: 800px; 
 
    height: 100px; 
 
    margin-left: 710px; 
 
    margin-right: 650px; 
 
    text-align: center; 
 
    opacity: 0.6; 
 
    font-family: Courier New; 
 
    font-style: bold; 
 
}

<div class="top">Study in Czech Republic</div><br> 
 
<ul> 
 
    <li><a>Home</a></li> 
 
    <li><a>News</a></li> 
 
    <li><a>Czech Republic</a> 
 
    <ul> 
 
     <li><a>Facts and figures</a></li> 
 
     <li><a>Area</a></li> 
 
     <li><a>Climate</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a>Study</a> 
 
    <ul> 
 
     <li><a>How to apply</a></li> 
 
     <li><a>Programmes</a></li> 
 
     <li><a>Scholarships</a></li> 
 
     <li><a>Tuition fees</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a>Living</a> 
 
    <ul> 
 
     <li><a>Arrival</a></li> 
 
     <li><a>Living costs</a></li> 
 
     <li><a>Work</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a>Contact</a></li> 
 
</ul> 
 
<div class="container-inner">Why study in the Czech Republic</div><br><br> 
 
<div class="container">These days, over 37,000 foreign students are studying in the Czech Republic; and as their universities continue to offer a ton of English-taught courses, more and more students are finding interesting options there. But if you decide to go there, you’ll 
 
    find a large, exciting community of international students just like you. Universities in the Czech Republic also offer a wide range of programmes at the Bachelor’s, Master’s, and Ph.D level; and each university is accredited, meaning that their courses 
 
    are recognised by companies and organisations all over the country and throughout Europe. In the Czech Republic, you can find one of the oldest traditions of higher education, dating all the way back to the 14th century. It probably also means the universities 
 
    are haunted.</div> 
 
<div class="container2"> 
 
    EXPERIENCE STUDYING IN THE HEART OF EUROPE 
 
</div><br> 
 
<div class="bachelor">Bachelor's Degrees in Czech Republic</div>

, 나는 선택 드롭 다운을 클릭 할 때마다, 그 후 뒤에 여는 것입니다. Z- 인덱스를 시도했지만 작동하지 않았습니다.

Answer 1

이 도움이 될 추가 :

ul li:hover ul { 
    position: relative; 
    z-index: 1; 
} 

전체 조각

body { 
 
    font: 1.5em Arial; 
 
    background-image: url('prague2.jpeg'); 
 
    background-size: cover; 
 
} 
 

 
.top { 
 
    opacity: 0.8; 
 
    font-size: 65px; 
 
    font-family: Courier new; 
 
    text-align: center; 
 
    background: #EBA23C; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    float: right; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    float: left; 
 
    width: 200px; 
 
    height: 40px; 
 
    background-color: #F05050; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    line-height: 40px; 
 
    margin-right: 2px; 
 
} 
 

 
ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 

 
ul li a:hover { 
 
    background-color: #C6AEF0; 
 
} 
 

 
ul li ul li { 
 
    display: none; 
 
} 
 

 
ul li:hover ul { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
ul li:hover ul li { 
 
    display: block; 
 
} 
 

 
.container { 
 
    line-height: 35px; 
 
    font-style: Lucida Console; 
 
    font-size: 22px; 
 
    opacity: 0.8; 
 
    background: #F0E3CA; 
 
    float: left; 
 
    width: 450px; 
 
    height: 630px; 
 
    border: 2px solid; 
 
    border-radius: 15px; 
 
} 
 

 
.container-inner { 
 
    border-radius: 15px; 
 
    background: #F05050; 
 
    text-align: center; 
 
    width: 450px; 
 
    height: 40px; 
 
    float: left; 
 
    border: 2px solid; 
 
} 
 

 
.container2 { 
 
    background-color: #ccc; 
 
    width: 650px; 
 
    margin-left: 780px; 
 
    margin-top: 30px; 
 
    font-size: 50px; 
 
    font-family: Courier New; 
 
    opacity: 0.7; 
 
    text-align: center; 
 
    border: dashed; 
 
} 
 

 
.bachelor { 
 
    font-size: 40px; 
 
    background-color: #ccc; 
 
    border: 2px solid; 
 
    width: 800px; 
 
    height: 100px; 
 
    margin-left: 710px; 
 
    margin-right: 650px; 
 
    text-align: center; 
 
    opacity: 0.6; 
 
    font-family: Courier New; 
 
    font-style: bold; 
 
}

<div class="top">Study in Czech Republic</div><br> 
 
<ul> 
 
    <li><a>Home</a></li> 
 
    <li><a>News</a></li> 
 
    <li><a>Czech Republic</a> 
 
    <ul> 
 
     <li><a>Facts and figures</a></li> 
 
     <li><a>Area</a></li> 
 
     <li><a>Climate</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a>Study</a> 
 
    <ul> 
 
     <li><a>How to apply</a></li> 
 
     <li><a>Programmes</a></li> 
 
     <li><a>Scholarships</a></li> 
 
     <li><a>Tuition fees</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a>Living</a> 
 
    <ul> 
 
     <li><a>Arrival</a></li> 
 
     <li><a>Living costs</a></li> 
 
     <li><a>Work</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a>Contact</a></li> 
 
</ul> 
 
<div class="container-inner">Why study in the Czech Republic</div><br><br> 
 
<div class="container">These days, over 37,000 foreign students are studying in the Czech Republic; and as their universities continue to offer a ton of English-taught courses, more and more students are finding interesting options there. But if you decide to go there, you’ll 
 
    find a large, exciting community of international students just like you. Universities in the Czech Republic also offer a wide range of programmes at the Bachelor’s, Master’s, and Ph.D level; and each university is accredited, meaning that their courses 
 
    are recognised by companies and organisations all over the country and throughout Europe. In the Czech Republic, you can find one of the oldest traditions of higher education, dating all the way back to the 14th century. It probably also means the universities 
 
    are haunted.</div> 
 
<div class="container2"> 
 
    EXPERIENCE STUDYING IN THE HEART OF EUROPE 
 
</div><br> 
 
<div class="bachelor">Bachelor's Degrees in Czech Republic</div>

Answer 2

을이 하나

부터 opacity: 0.8;을 제거하려고 container

및

ul li ul li

body { 
 
    font: 1.5em Arial; 
 
    background-image: url('prague2.jpeg'); 
 
    background-size: cover; 
 
} 
 

 
.top { 
 
    opacity: 0.8; 
 
    font-size: 65px; 
 
    font-family: Courier new; 
 
    text-align: center; 
 
    background: #EBA23C; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    float: right; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    float: left; 
 
    width: 200px; 
 
    height: 40px; 
 
    background-color: #F05050; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    line-height: 40px; 
 
    margin-right: 2px; 
 
} 
 

 
ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 

 
ul li a:hover { 
 
    background-color: #C6AEF0; 
 
} 
 

 
ul li ul li { 
 
    display: none; 
 
    opacity: 0.9; 
 
} 
 

 
ul li:hover ul li { 
 
    display: block; 
 
} 
 

 
.container { 
 
    line-height: 35px; 
 
    font-style: Lucida Console; 
 
    font-size: 22px; 
 
    // opacity: 0.8; 
 
    background: #F0E3CA; 
 
    float: left; 
 
    width: 450px; 
 
    height: 630px; 
 
    border: 2px solid; 
 
    border-radius: 15px; 
 
} 
 

 
.container-inner { 
 
    border-radius: 15px; 
 
    background: #F05050; 
 
    text-align: center; 
 
    width: 450px; 
 
    height: 40px; 
 
    float: left; 
 
    border: 2px solid; 
 
} 
 

 
.container2 { 
 
    background-color: #ccc; 
 
    width: 650px; 
 
    margin-left: 780px; 
 
    margin-top: 30px; 
 
    font-size: 50px; 
 
    font-family: Courier New; 
 
    opacity: 0.7; 
 
    text-align: center; 
 
    border: dashed; 
 
} 
 

 
.bachelor { 
 
    font-size: 40px; 
 
    background-color: #ccc; 
 
    border: 2px solid; 
 
    width: 800px; 
 
    height: 100px; 
 
    margin-left: 710px; 
 
    margin-right: 650px; 
 
    text-align: center; 
 
    opacity: 0.6; 
 
    font-family: Courier New; 
 
    font-style: bold; 
 
}

<meta charset="utf-8"> 
 

 
<head> 
 
    <title>Home page</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <div class="top">Study in Czech Republic</div><br> 
 
    <ul> 
 
    <li><a>Home</a></li> 
 
    <li><a>News</a></li> 
 
    <li><a>Czech Republic</a> 
 
     <ul> 
 
     <li><a>Facts and figures</a></li> 
 
     <li><a>Area</a></li> 
 
     <li><a>Climate</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a>Study</a> 
 
     <ul> 
 
     <li><a>How to apply</a></li> 
 
     <li><a>Programmes</a></li> 
 
     <li><a>Scholarships</a></li> 
 
     <li><a>Tuition fees</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a>Living</a> 
 
     <ul> 
 
     <li><a>Arrival</a></li> 
 
     <li><a>Living costs</a></li> 
 
     <li><a>Work</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a>Contact</a></li> 
 
    </ul> 
 
    <div class="container-inner">Why study in the Czech Republic</div><br><br> 
 
    <div class="container">These days, over 37,000 foreign students are studying in the Czech Republic; and as their universities continue to offer a ton of English-taught courses, more and more students are finding interesting options there. But if you decide to go there, you’ll 
 
    find a large, exciting community of international students just like you.