时间戳

首页 > 解决方案 > 悬停时无法显示水平菜单的子菜单

html - 悬停时无法显示水平菜单的子菜单

问题描述

导航面板（div id=#nav）位于水平菜单（nav_main_ul）。它有子菜单。当我加载站点时，出现主水平，但在主菜单的悬停子菜单上没有出现。我写的：

   .nav_main_ul li a:hover .submenu{
         top:150;
 }

怎么了？当我将 flexbox 用于侧边栏、内容和页脚时，一切都正常工作。
我是 html 和 css 的新手。我认为失败的原因是位置（绝对，相对）和弹性盒之间的冲突。
提前致谢。

在此处输入图像描述

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
}

#nav {
  left: 0;
  top: 120px;
  background-color: #00004d;
  width: 100%;
}

.nav_main_ul {
  position: relative;
  margin: 0px 0 0 400px;
}

#nav ul {
  height: 50px;
  list-style: none;
  background-color: #00004d;
}

#nav li {
  display: block;
  float: left;
  font-family: Arial, sans-serif;
  font-size: 20px;
  position: relative;
}

#nav li a {
  color: #fff;
  display: block;
  height: 50px;
  padding: 0 10px;
  text-decoration: none;
  line-height: 50px;
}

.nav_main_ul li a:hover {
  background: #000080;
}


/*.nav_main_ul li a:hover .submenu{
    	top:50;
    }*/

.submenu {
  position: absolute;
  width: 250px;
  top: -9999em;
}

.submenu li {
  width: 100%;
  height: 40px;
  background: #00004d;
}

.submenu li a {
  line-height: 50px;
  height: 50px;
  transition: background 0.5s;
}

.submenu li a:hover {
  background-color: red;
}

li:hover .submenu li {
  display: block;
  z-index: 100;
}
<div id="nav">
  <ul class="nav_main_ul">
    <li><a href="">Main</a>
      <ul class="submenu">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
      </ul>
    </li>
    <li> <a href="#">News</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
      </ul>
    </li>
    <li><a href="#">About us</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Contacts</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
  </ul>
</div>

标签： htmlcssflexbox

解决方案

编辑

嗨 Delphi - 要回答您关于+选择器的问题，让我们看一下您的 HTML 标记：

<li>
  <a href="">Main</a>
  <ul class="submenu">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
  </ul>
</li>

我们需要明白，在上面的标记中，我们可以将其表示为：

LI (Parent / Root)
 - A (Child of LI, Sibling of UL)
 - UL (Child of LI, Sibling of A)
   - LI (Child of UL, Grand-Child of LI)

您希望的操作是，当用户hovers 结束时A，我们显示UL。

通常使用 CSS，我们会想到NESTED（或父母/孩子）用例。但是在您的用例中，AandUL不是父/子关系。相反，他们是兄弟姐妹。

所以，我们想要的是：当用户将鼠标悬停在 上时A，我们希望 A 的 SIBLING(s)（在这种情况下，只有 UL）具有TOP: 50PX。

CSS 中有两个兄弟选择器，“相邻”和“常规”。相邻意味着它仅适用于兄弟姐妹直接在一起的情况。例如：

<div>
    <p></p>
    <span></span>
    <span></span>
    <p></p>
</div>

OR:

DIV
 - P
 - SPAN
 - SPAN 
 - P

让我们假设在上面，我们想要选择作为 P 的 SIBLING 的每个 SPAN。如果我们这样做：

p + span { color : red }

只有第一个跨度会被应用。这是因为，它是唯一紧邻 P 元素的跨度。演示：http: //jsfiddle.net/ucq5pg13/

如果我们希望 P 之后的所有跨度都是红色的怎么办？这就是我们的 GENERAL 兄弟选择器发挥作用的地方：

p ~ span { color: red }

这说明了任何作为 P 的 SIBLING 的跨度，在它之后出现，将是红色的。

重要的是要注意它必须紧随其后。例如：

p ~ span { color: red }

<div>
    <span></span> <!-- I WOULD NOT BE RED -->
    <p></p>
    <span></span> <!-- I WOULD BE RED -->
    <span></span> <!-- I WOULD BE RED -->
    <p></p>
</div>

演示：http: //jsfiddle.net/kb7n5236/

希望这会有所帮助:)

原来的：

当您hover通过a链接时，您需要将.submenu. 您可以执行以下操作：

<!-- On hover, show submenu -->
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
    top: 50px;
}

JSFiddle：http: //jsfiddle.net/1us0q4m3/1/

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
}

#nav {
  left: 0;
  top: 120px;
  background-color: #00004d;
  width: 100%;
}

.nav_main_ul {
  position: relative;
  margin: 0px 0 0 400px;
}

#nav ul {
  height: 50px;
  list-style: none;
  background-color: #00004d;
}

#nav li {
  display: block;
  float: left;
  font-family: Arial, sans-serif;
  font-size: 20px;
  position: relative;
}

#nav li a {
  color: #fff;
  display: block;
  height: 50px;
  padding: 0 10px;
  text-decoration: none;
  line-height: 50px;
}

.nav_main_ul li a:hover {
  background: #000080;
}

  
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
    top: 50px;
}

.submenu {
  position: absolute;
  width: 250px;
  top: -9999em;
}

.submenu li {
  width: 100%;
  height: 40px;
  background: #00004d;
}

.submenu li a {
  line-height: 50px;
  height: 50px;
  transition: background 0.5s;
}

.submenu li a:hover {
  background-color: red;
}

li:hover .submenu li {
  display: block;
  z-index: 100;
}
<div id="nav">
  <ul class="nav_main_ul">
    <li><a href="">Main</a>
      <ul class="submenu">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
      </ul>
    </li>
    <li> <a href="#">News</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
      </ul>
    </li>
    <li><a href="#">About us</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Contacts</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
  </ul>
</div>

推荐阅读