Question

我尝试使用css在mouseover上创建一个下拉菜单。但它似乎是不正确的。我想在.drop上的鼠标悬停时显示课程.menu。有人可以帮我纠正吗？

HTML文件：

<div id="navi">
  <span class="menu"></span>
  <nav class="drop">
    <li>Home</li>
    <li>Time</li>
    <li>Contact</li>
  </nav>
</div>

CSS文件：

.menu{
  display:block;
  width:80px;
  height:80px;
  background-image:url(../images/menu.svg);
  background-size:cover;
  background-position:center;
}

.menu:hover{
  display:block;
  width:80px;
  height:80px;
  background-image:url(../images/menu2.svg);
  background-size:cover;
  background-position:center;
}

.drop{
  position:absolute;
  background:#000;
  margin:0;
  padding:10px;
  font-family: 'Exo 2', sans-serif;
  color:#FFF;
  visibility:hidden;
}

.menu:hover .drop{
  position:absolute;
  background:#000;
  margin:0;
  padding:10px;
  font-family: 'Exo 2', sans-serif;
  color:#FFF;
  visibility:visible;
}

Answer 1

试试这个

<div id="navi">
<span class="menu">dffdf</span>
    <nav class="drop">
        <li>Home</li>
        <li>Time</li>
        <li>Contact</li>
    </nav>
</div>


.menu{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu.svg);
background-size:cover;
background-position:center;
}
 .menu:hover{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu2.svg);
background-size:cover;
background-position:center;
  }

.drop{
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:hidden;
}

.menu:hover+.drop,.drop:hover{
/*_________^_________^___________*/
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:visible;
 }

FIDDLE

使用css在mouseover上创建下拉菜单

1 个答案: