为什么当悬停在水平菜单上时子菜单会消失

时间：2016-05-31 21:51:18

标签： javascript jquery html css hover

当我将鼠标悬停在其上时，我有一个水平样式菜单，并尝试将鼠标悬停在其列表项和子菜单上，菜单消失。

＆＃13;
＆＃13; 
#main_nav:before,
#main_nav:after {
  content: "";
  display: table;
}
#main_nav {
  zoom: 1;
  list-style: none;
  float: left;
  margin: 0px 0px 0px 350px;
}
#main_nav li {
  float: left;
  position: relative;
  padding: 0px 5px 0px 5px;
  cursor: pointer;
}
#main_nav li a {
  text-align: center;
}
#main_nav ul {
  list-style: none;
  width: 110px;
  margin: 0px;
  padding: 0px;
  border: solid;
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 1;
}
#main_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  top: -3px;
}
#main_nav > li:hover {
  border-bottom: solid red;
}
#main_nav >li:hover > ul {
  top: 30px;
}
#main_nav ul ul {
  left: 110px;
}
＆＃13; 
<ul id="main_nav">
  <li>TITLE 1
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul class="submenu">
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 2
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul class="submenu">
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 3
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 4
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 5
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 6
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 7
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

因此，当鼠标悬停在菜单上，然后弹出子菜单，当我尝试将鼠标悬停在子菜单上时，它们会消失，为什么会这样？

1 个答案:

答案 0 :(得分：0)

问题是ul距离li太远，所以当你试图达到悬停状态时会被禁用。

尝试以下CSS：

func fetchEvents(){

    let query = GTLQueryCalendar.queryForEventsListWithCalendarId("primary")
    query.maxResults = 30

    query.timeMin = NSDate()

    query.singleEvents = true
    query.orderBy = kGTLCalendarOrderByStartTime
    service.executeQuery(
        query,
        delegate: self,
        didFinishSelector: "displayResultWithTicket:finishedWithObject:error:"
    )
}
相关问题
最新问题