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

时间：2018-06-09 22:59:10

标签： html css html5 css3 flexbox

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

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

有什么问题？ 当我使用flexbox作为侧边栏，内容和页脚时，一切都运行了 我是html和css的新手。我认为失败的原因是位置（绝对，相对）和弹性箱之间的冲突 提前谢谢。

enter image description here

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

修改

您好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)

您希望的操作是当用户hover超过A时，我们会显示UL。

通常使用CSS，我们会考虑NESTED（或PARENT / CHILD）用例。但在您的用例中，A和UL不属于父/子关系。相反，他们是兄弟姐妹。

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

CSS中有两个兄弟选择器，＆＃34;相邻＆＃34;和＆＃34;将军＆＃34;。相邻意味着它将仅在兄弟姐妹直接在一起时适用。例如：

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

OR:

DIV
 - P
 - SPAN
 - SPAN 
 - P

让我们假设在上面，我们想要选择每个SP的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/

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题