下拉菜单隐藏在容器后面

时间：2017-12-14 11:32:45

标签： html css drop-down-menu

问题在于，每当我点击选择下拉菜单时，它就会在<div>之后打开。我尝试了z-index，但它没有用。

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-index，但它没有用。

2 个答案:

答案 0 :(得分：0)

添加此功能应该有所帮助：

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

完整摘要

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试这个

从opacity: 0.8;

中删除container

和

在opacity: 0.9;

中添加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.

相关问题
最新问题