Question

我有以下代码：

＆＃13;

/****  DropDown Css  ******/

.inner_menu ul#nav > li span {
  display: inline-block;
  height: 15px;
  vertical-align: middle;
  width: 20px;
  background: url(../images/drp_arw_dwn.png) no-repeat center;
  margin-left: 10px;
}

.inner_menu ul#nav > li:hover span {
  background: url(../images/drp_arw.png) no-repeat center;
}

.inner_menu ul#nav > li:hover .subnav {
  display: block;
}

.subnav {
  position: absolute;
  padding-top: 18px;
  display: none;
  left: 50%;
  margin-left: -100px;
  border-style: solid; 
  border-width: 5px; 
  border-color:#2c91da
}

.subnav ul {
  background: #333;
  width: 200px;
  padding-top: 15px;
}

.subnav ul li {
  display: block;
  margin: 0;
  padding: 0 0 0 20px;
}

.subnav ul li a {
  color: #fff;
  font-size: 18px;
  padding-bottom: 5px;
}

.subnav ul li:hover a {
  color: #2c91da;
  display: block;
}

/******************  Nav Menu  *****************/

.header .wrapper:after {
  opacity: 0.5;
}

.dashboard_page {
  position: relative;
  background: #fff;
  padding: 42px 0;

}

.dashboard_page .wrapper {
  position: relative;
  z-index: 9;
}

.dashboard_page:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 370px;
  position: absolute;
  content: "";
  background: #f7f8f9;
  pointer-events: none;
}

.inner_menu {
  margin: 7px 0 0 0;
  padding: 0;
  display: block;
}

.inner_menu ul#nav {
  margin: 0;
  padding: 0;
  display: inline-block;
  border-right: 1px solid #f2f2f2;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}

.inner_menu ul#nav > li {
  margin: 0;
  padding: 0;
  height: 52px;
  line-height: 52px;
  display: block;
  float: left;
  border-left: 1px solid #f2f2f2;
  position: relative;
}

.inner_menu ul#nav > li > a {
  display: block;
  color: #2f2f2f;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0 27px;
  border-style: solid; 
  border-width: 5px;
}

.inner_menu ul#nav > li:after {
  position: absolute;
  width: 38px;
  left: 50%;
  margin-left: -19px;
  content: "";
  background: url(../images/menu_arw.png) no-repeat;
  height: 20px;
  bottom: -35px;
  z-index: 9;
  display: none;
}

.inner_menu ul#nav > li:hover:after {
  display: block;
}

.inner_menu ul#nav > li.active:after {
  display: block;
}

＆＃13;

<div class="inner_menu">
  <div class="toggle"></div>
  <ul id="nav">
    <li>
      <a href="#">Link 1</a>
    </li>
    <li>
      <a href="#">Trackers</a>
      <div class="subnav">
        <ul>
          <li><a href="#">Sub Menu 1</a>
          </li>
          <li><a href="#">Sub Menu 2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

＆＃13;

问题是在Internet Explorer中，当我尝试将光标移动到元素下方以单击下拉列表时，它会消失，我无法单击它。

我做错了什么？

Answer 1

问题是这个CSS项目：

.header .wrapper：在{position：absolute;之后底部：-33px;宽度：100％;高度：34像素;内容：””;左：0; background：url（../ images / shadow-bg.png）无重复中心; background-size：100％自动;指针事件：无}

属性底部应为较高的负数。 -150px为我工作。我改成了这个：

.header .wrapper：在{position：absolute;之后

底部：-150px

宽度：100％;高度：34像素;内容：””;左：0; background：url（../ images / shadow-bg.png）无重复中心; background-size：100％自动;指针事件：无}

Answer 2

让我们分解一下：

你将鼠标悬停在＆＃39; .inner_menu ul＃nav＆gt;利：悬停＆＃39;
＆＃39;显示＆＃39;被设置为＆＃39;阻止＆＃39;为＆＃39; .subnav＆＃39;。
移动鼠标直到它移出实际链接（表示＆＃34; Trackers＆＃34;）
选择器＆＃39; .inner_menu ul＃nav＆gt;利：悬停＆＃39;不再适用，因为你不再在链接上盘旋。
背景未设置。

如果你将.subnav移动到链接附近（没有空格！）它应该会更好。

以下是指向仅使用CSS的导航栏的链接：http://www.cssnewbie.com/easy-css-dropdown-menus/

您可能希望使用JavaScript来获得更高级的功能。

CSS的一些限制：

没有空格，如果您的子菜单旁边的子菜单不正确，它可能不会起作用（或者至少很难实现）
没有高级淡入淡出，点击或其他事件，只是悬停。

在IE中悬停后，下拉立即消失

2 个答案: