文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >悬停时无法显示水平菜单的子菜单

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

Stack Overflow用户
提问于 2018-06-10 06:59:10
回答 1查看 164关注 0票数 3

有导航面板(div id=#nav)，其中有水平菜单(Nav_main_ul)。它有子菜单。当我加载站点时，主水平显示出现，但在主菜单的悬停子菜单上不出现。我写道：

代码语言：javascript
复制
   .nav_main_ul li a:hover .submenu{
         top:150;
 }

怎么啦？当我使用flexbox作为侧边栏、内容和页脚时，一切都能正常工作。

我是个html和css的新手。我认为失败的原因是位置(绝对的，相对的)和flexbox之间的冲突。

提前谢谢。

​

​

​

代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<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>

​

html
css
flexbox
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-10 07:36:57

编辑

为了回答你关于+选择器的问题，让我们来看看你的HTML标记：

代码语言：javascript
复制
<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>

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

代码语言：javascript
复制
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)

您需要的操作是，当用户在A上执行hover操作时，我们将显示UL。

通常使用CSS时，我们会想到NESTED (或父/子)用例。但在您的用例中，A和UL不是父/子关系。相反，他们是兄弟姐妹。

因此，我们需要的是:当用户将鼠标悬停在A上时，我们希望A的同级(在本例中仅为UL)具有TOP: 50PX。

CSS中有两个同级选择器，“相邻”和“常规”。相邻意味着它将仅在同级直接在一起时应用。例如：

代码语言：javascript
复制
<div>
    <p></p>
    <span></span>
    <span></span>
    <p></p>
</div>

OR:

DIV
 - P
 - SPAN
 - SPAN 
 - P

让我们假设在上面，我们想要选择作为P的兄弟的每个跨度。如果我们这样做了：

代码语言：javascript
复制
p + span { color : red }

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

如果我们想让所有跟在P后面的跨度都是红色呢？这就是我们的通用兄弟选择器发挥作用的地方：

代码语言：javascript
复制
p ~ span { color: red }

这就是说，任何跨度是P的兄弟，在它之后，将是红色的。

重要的是要注意，它必须在后面。例如：

代码语言：javascript
复制
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/

希望这对我们有所帮助:)

原创：

当您在a链接上使用hover时，您需要定位.submenu。你可以这样做：

代码语言：javascript
复制
<!-- 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/

​

代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<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>

​

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50779226

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档