Question

我有一个带水平子菜单的导航栏，并在悬停时出现子菜单。我用display none来隐藏它，但悬停代码不起作用。这是整个代码。

UIPanGestureRecognizer

body {
  margin: 0;
  padding: 0;
  background: #eee;
}

.nav ul {
  list-style: none;
  margin: 200px 0 0 14px; /* top, right, bottom, left*/
  padding: 0;
  overflow: hidden;
}

.nav li {
  float: left;
}

.nav a {
  background-color: gray;
  padding: 10px;
  margin-right: 10px;
  display: block;
}

/*SUBNAV*/ 

.subnav ul {
  list-style: none;
  padding: 10px;
  margin: 0;
  overflow: hidden;
  background-color: black;
  display: none;
}

.subnav li {
  float: left;
  margin-left: 25px;
}

.nav li:hover .subnav ul {
  display: block;
}

所以你可以看到当你徘徊在商店时，它应该显示子菜单，但事实并非如此。

Answer 1

您的CSS选择.subnav作为.nav li的孩子，但您的HTML不是那样构建的。
要使用当前的CSS，您需要将.subnav移至.nav li。
示例如下：

＆＃13;

body {
  margin: 0;
  padding: 0;
  background: #eee;
}

.nav ul {
  list-style: none;
  margin: 0 0 0 14px;
  /* top, right, bottom, left*/
  padding: 0;
  overflow: hidden;
}

.nav li {
  float: left;
}

.nav a {
  background-color: gray;
  padding: 10px;
  margin-right: 10px;
  display: block;
}


/*SUBNAV*/

.subnav ul {
  list-style: none;
  padding: 10px;
  margin: 0;
  overflow: hidden;
  background-color: black;
  display: none;
}

.subnav li {
  float: left;
  margin-left: 25px;
}

.nav li:hover .subnav ul {
  display: block;
}

＆＃13;

<div class="nav">
  <ul>
    <li class="ana">
      <a class="active" href="#">Home</a>
    </li>
    <li class="magaza">
      <a href="#">Shop</a>
      <div class="subnav">
        <ul>
          <li><a href="#">Yetki</a></li>
          <li><a href="#">Kredi</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

＆＃13;

修改

您似乎希望下拉菜单为水平，页面的整个宽度以及主导航下方。

我将subnav设置为position:absolute。这样它就可以定位在容器li.magaza之外，但仍然可以通过其祖先上的悬停事件触发。

我还添加了一个不透明度/可见性transition来淡入淡出子菜单（不使用JavaScript）。

＆＃13;

body {
  margin: 0;
  padding: 0;
  background: #eee;
}

.nav ul {
  list-style: none;
  margin: 0 0 0 14px;
  /* top, right, bottom, left*/
  padding: 0;
  overflow: hidden;
}

.nav li {
  float: left;
}

.nav a {
  background-color: gray;
  padding: 10px;
  margin-right: 10px;
  display: block;
}


/*SUBNAV*/

.subnav ul {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  padding: 10px;
  margin: 0;
  background-color: black;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility 0s .2s;
}

.subnav li {
  float: left;
  margin-left: 25px;
}

.nav li:hover .subnav ul {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
}

＆＃13;

<div class="nav">
  <ul>
    <li class="ana">
      <a class="active" href="#">Home</a>
    </li>
    <li class="magaza">
      <a href="#">Shop</a>
      <div class="subnav">
        <ul>
          <li><a href="#">Yetki</a></li>
          <li><a href="#">Kredi</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<p>Page content goes here</p>

＆＃13;

Answer 2

您的HTML结构错误。您需要在父li下移动subnav div。

这是给你的JQUERY。更新了您的示例。给予淡出效果。

如果您只想在css部分使用css检查评论。

＆＃13;

$( "li.has-subnav" ).hover(
  function() {
    $('.subnav').fadeIn(200);
  },
  function() {
    $('.subnav').fadeOut(200);
  }
);

＆＃13;

.nav ul {
  list-style: none;
  margin: 0 0 0 14px; /* top, right, bottom, left*/
  padding: 0;
}

.nav li {
  display: inline-block;
}

.nav a {
  background-color: gray;
  padding: 10px;
  margin-right: 10px;
  display: block;
}

/*SUBNAV*/ 

.subnav {
  list-style: none;
  padding: 10px;
  background-color: black;
  display: none;
  position: absolute;
  left:0;
  width:100%;
  box-sizing: border-box;
}

/** Uncomment the following css and remove jQuery to use only css **/

// .has-subnav:hover .subnav {
//   display: block;
// }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="C:\Users\Arda\Desktop\website 2\style1.css">
	<title>Sunucu</title>
</head>
<body>
    <div class="nav">
        <ul>
            <li class="ana"><a class="active" href="#">Home</a></li>
            <li class="magaza has-subnav">
              <a href="#">Shop</a>
              <div class="subnav">
                <ul>
                    <li><a href="#">Yetki</a></li>
                    <li><a href="#">Kredi</a></li>
                </ul>
              </div>
            </li>
        </ul>
        
    </div>
</body>
</html>

＆＃13;

悬停和显示问题

2 个答案:

修改