Question

在放置div类“ hero”之前，下拉菜单运行良好，但是在放置div类“ hero”之后，下拉菜单不再起作用。请帮助我，我是html和CSS的新手。谢谢。

body {
  margin: 0;
}

.here {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menu .here .choice {
  float: right;
  width: 200px;
  height: 40px;
  display: inline;
  border: 3px;
  background-color: orange;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

.here .heh {
  text-decoration: none;
  color: white;
  display: block;
}

.here .heh:hover {
  background-color: green;
}

.subs {
  text-decoration: none;
  background-color: orange;
  display: none;
  color: white;
}

.subs:hover {
  background-color: green;
}

.choice:hover .subs {
  display: block;
}

.hero {
  position: absolute;
  width: 100%;
  margin-left: 0;
  margin-top: 0;
}

.hero .head1 {
  color: black;
  text-transform: uppercase;
  font-size: 70px;
  text-align: center;
  margin-top: 270px;
  font-family: bodoni;
}

.hero .head3 {
  text-align: center;
  font-family: helvetica;
}

<head>
  <link rel="stylesheet" href="one.css">
  <link rel="stylesheet" href="two.css">
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="menu">
    <ul class="here">
      <li class="choice"><a href="" class="heh">About</a>
        <ul class="here">
          <li><a href="" class="subs">You</a></li>
          <li><a href="http://www.facebook.com" class="subs">Me</a> </li>
          <li><a href="" class="subs">Us</a></li>

        </ul>

      </li>
      <li class="choice"><a href="" class="heh">Contact Us</a></li>
      <li class="choice"><a href="" class="heh">Sign Up</a></li>
      <li class="choice"><a href="" class="heh">Log in</a></li>

    </ul>


  </div>

  <div class="hero">
    <h1 class="head1">something.com</h1>
    <h3 class="head3">this is a random sentence.</h3>

  </div>

</body>

只要我消除第二个div（即“ hero”类），这些代码就会起作用。但是我不知道这里发生了什么。我需要你的帮助。

Answer 1

.hero元素位于菜单顶部。您可以通过使用浏览器的开发工具并将其悬停在元素上来进行检查。您将看到，即使您可以直观地看到它，它也会在菜单上展开并覆盖它。您可以添加如下内容：

.hero {
    pointer-events:none;
}

这样，您可以访问.hero下的元素。另一种解决方案是在元素上添加一个负的z-index，将其堆叠在菜单后面并使其可以再次访问

Answer 2

您可以在position:relative div上方添加absolute div，并且需要更改某些菜单CSS

body{
margin: 0;
}

.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;

}



.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;

}

.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;

}

.here .heh,.subs{
  width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}

.here .heh:hover{
background-color: green;
}

.hereinner{
display: none;
}

.subs{
text-decoration: none;
background-color: orange;
color: white;
}

.subs:hover{
background-color: green;
}

.choice:hover .hereinner{
display: block;
}
.clearfix{
  clear:both;
}
.posrel{
  position:relative;
}

.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}

.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}

.hero .head3{
text-align: center;
font-family: helvetica;
}

<div class="menu">
<ul class="here">
        <li class="choice" ><a href="" class="heh">About</a>
            <ul class="hereinner">
                <li ><a href="" class="subs">You</a></li>
                <li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
                <li><a href=""  class="subs">Us</a></li>

            </ul>

        </li>
        <li class="choice"><a href="" class="heh">Contact Us</a></li>
        <li class="choice"><a href="" class="heh">Sign Up</a></li>
        <li class="choice"><a href="" class="heh">Log in</a></li>

    </ul>
    <div class="clearfix">
    
    </div>


</div>
<div class="posrel">
    <div class="hero">
        <h1 class="head1">something.com</h1>
        <h3 class="head3">this is a random sentence.</h3>

</div>          

</div>

放置另一个div后，下拉菜单不起作用

2 个答案: