搜索
搜索

即使悬停显示，我的下拉菜单也不会显示

Jayden Freh 发表于 Dev
29
杰登·弗雷（Jayden Freh）

下拉菜单对我的导航不起作用。它被display：none隐藏，但是在悬停时没有显示任何内容，即使我指定当将包含UL的锚标记悬停在上方时，子元素也会被阻止显示。

的HTML：

<body>

    <header id = "M_head">
            <h2><ul>MC</ul></h2>    

    </header>
        <div id="container">

            <nav id="M_nav">
                <ul>
                    <a>NEWS<img class="Nav_down1" src="Nav_down1.png">
                        <ul>
                            <li><a>ting1</a></li>
                        </ul>
                    </a>
                    <a>STORE<img class="Nav_down1" src="Nav_down1.png"></a>
                    <a>BLOG<img class="Nav_down1" src="Nav_down1.png"></a>
                    <a>CONTACTS<img class="Nav_down1" src="Nav_down1.png"></a>
                    <a>ABOUT<img class="Nav_down1" src="Nav_down1.png"></a>


                </ul>
            </nav>

            <section id="M_section">
            <div id=Side_sec></div>
            <div id="Side_sec2"></div>
            </section>

            <footer id="M_footer">

            </footer>
        </div>

    </body>

CSS：

* {
  box-sizing: border-box; }

body {
  max-width: 100%;
  margin: 0px;
  display: block; }

#container {
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  margin: 0px auto;
  margin-top: -.5em;
  background-image: url("MircBackground.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat; }

#M_head {
  margin: 0px auto;
  color: black;
  width: 90%;
  background-color: white;
  height: 4em; }

#M_head ul {
  padding: 0px auto !important;
  margin: 0px;
  margin-left: 5em;
  text-align: left;
  font-style: italic;
  font-weight: bold;
  width: 30%;
  letter-spacing: -0.08em;
  word-spacing: -0.03em; }

#M_nav ul {
  width: 102.5%;
  padding: 0px;
  padding-top: .25em;
  padding-bottom: .25em;
  margin-left: -2.6%;
  margin-top: 0em;
  background-color: black;
  position: relative;
  display: inline-table; }

#M_nav ul a {
  display: inline-block;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  padding-left: 3.5em;
  padding-right: 3.5em;
  padding-top: 0.35em;
  padding-bottom: 0.35em;
  display: inline-block;
  border-radius: 0.25em;
  color: white;
  font-weight: bold;
  background-color: black; }

.Nav_down1 {
  position: absolute;
  height: 0.625em;
  margin-left: 0.625em;
  margin-top: 0.3125em;
  overflow: none; }

#M_nav ul a:hover {
  background-color: #FFBF00;
  color: white;
  font-shadow: none; }

#M_nav ul ul {
  display: none; }

#M_nav ul > a:hover > ul {
  display: block; }

#Side_sec {
  height: 50em;
  width: 15%;
  border: 2px solid white;
  float: right; }

#M_section {
  height: 50em;
  width: 80%;
  margin: -1em auto;
  border: 2px solid white; }

这是Jsfiddle链接：http : //jsfiddle.net/va06bfav/

因加拉夫 

* {
  box-sizing: border-box;
}
body {
  max-width: 100%;
  margin: 0px;
  display: block;
}
#container {
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  margin: 0px auto;
  margin-top: -.5em;
  background-image: url("MircBackground.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}
#M_head {
  margin: 0px auto;
  color: black;
  width: 90%;
  background-color: white;
  height: 4em;
}
#M_head ul {
  padding: 0px auto !important;
  margin: 0px;
  margin-left: 5em;
  text-align: left;
  font-style: italic;
  font-weight: bold;
  width: 30%;
  letter-spacing: -0.08em;
  word-spacing: -0.03em;
}
#M_nav ul {
  width: 102.5%;
  padding: 0px;
  padding-top: .25em;
  padding-bottom: .25em;
  margin-top: 0em;
  background-color: black;
  position: relative;
  display: inline-table;
}
#M_nav ul a {
  display: inline-block;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  padding-left: 3.5em;
  padding-right: 3.5em;
  padding-top: 0.35em;
  padding-bottom: 0.35em;
  display: inline-block;
  border-radius: 0.25em;
  color: white;
  font-weight: bold;
  background-color: black;
}
.Nav_down1 {
  position: absolute;
  height: 0.625em;
  margin-left: 0.625em;
  margin-top: 0.3125em;
  overflow: none;
}
#M_nav ul a:hover {
  background-color: #FFBF00;
  color: white;
  font-shadow: none;
}
#M_nav ul li {
  float: left;
  position: relative;
}
#M_nav ul ul {
  display: none;
  position: absolute;
  width: 157px;
  top: 34px;
  left: 0px;
  list-style: none;
}
#M_nav ul a:hover + ul {
  display: block;
}
#Side_sec {
  height: 50em;
  width: 15%;
  border: 2px solid white;
  float: right;
}
#M_section {
  height: 50em;
  width: 80%;
  margin: -1em auto;
  border: 2px solid white;
}
<div id="container">
  <nav id="M_nav">
    <ul>
      <li>
        <a>NEWS<img class="Nav_down1"src="Nav_down1.png">
                 
                </a>
        <ul>
          <li><a>ting1</a>
          </li>
        </ul>
      </li>
      <li>
        <a>NEWS<img class="Nav_down1"src="Nav_down1.png">
                 
                </a>
        <ul>
          <li><a>ting1</a>
          </li>
        </ul>
      </li>
      <li>
        <a>NEWS<img class="Nav_down1"src="Nav_down1.png">
                 
                </a>
        <ul>
          <li><a>ting1</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

如果您在开发工具中看到代码，则可以看到下拉菜单Ul不是您的定位标记的直接子代，而是直接将其放置在定位标记之后。您使用的选择器是X> Y，它将选择直接子级（请参阅链接以获取有关CSS选择器的更多详细信息。）

我所做的改变

改变了您的标记结构，在其中添加了li，而li早就不存在了，并导致了我上面提到的下拉菜单的怪异行为。

将css选择器从X> Y更改为XX + Y，此选择器将执行什么操作，它将仅选择紧接在前一个元素之后的元素。 

* {
    box-sizing: border-box;
}
body {
    max-width: 100%;
    margin: 0px;
    display: block;
}
#container {
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    margin: 0px auto;
    margin-top: -.5em;
    background-image: url("MircBackground.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}
#M_head {
    margin: 0px auto;
    color: black;
    width: 90%;
    background-color: white;
    height: 4em;
}
#M_head ul {
    padding: 0px auto !important;
    margin: 0px;
    margin-left: 5em;
    text-align: left;
    font-style: italic;
    font-weight: bold;
    width: 30%;
    letter-spacing: -0.08em;
    word-spacing: -0.03em;
}
#M_nav ul {
    width: 102.5%;
    padding: 0px;
    padding-top: .25em;
    padding-bottom: .25em;
    margin-left: -2.6%;
    margin-top: 0em;
    background-color: black;
    position: relative;
    display: inline-table;
}
#M_nav ul a {
    display: inline-block;
    list-style-type: none;
    text-decoration: none;
    text-align: center;
    padding-left: 3.5em;
    padding-right: 3.5em;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
    display: inline-block;
    border-radius: 0.25em;
    color: white;
    font-weight: bold;
    background-color: black;
}
.Nav_down1 {
    position: absolute;
    height: 0.625em;
    margin-left: 0.625em;
    margin-top: 0.3125em;
    overflow: none;
}
#M_nav ul a:hover {
    background-color: #FFBF00;
    color: white;
    font-shadow: none;
}
#M_nav ul ul {
    display: none;
}
#M_nav ul a:hover + ul {
    display: block;
}
#Side_sec {
    height: 50em;
    width: 15%;
    border: 2px solid white;
    float: right;
}
#M_section {
    height: 50em;
    width: 80%;
    margin: -1em auto;
    border: 2px solid white;
}
<div id="container">
    <nav id="M_nav">
        <ul>
            <li> 
                <a>NEWS<img class="Nav_down1"src="Nav_down1.png">
                 
                </a>
                    <ul>
                        <li><a>ting1</a></li>
                </ul>
             </li>
        </ul>
    </nav>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

悬停不显示下拉菜单

来自分类Dev

子菜单悬停显示限制

来自分类Dev

在菜单栏外悬停显示 div

来自分类Dev

下拉显示下拉菜单上的悬停按钮

来自分类Dev

将鼠标悬停在<a>上将不会显示下拉菜单

来自分类Dev

将鼠标悬停在<a>上将不会显示下拉菜单

来自分类Dev

该引导菜单如何显示悬停下拉菜单？

来自分类Dev

在鼠标悬停时显示下拉菜单

来自分类Dev

如何创建显示所选变量的悬停式下拉菜单

来自分类Dev

在悬停时显示下拉菜单并替换CSS类

来自分类Dev

实体化-不会显示下拉菜单

来自分类Dev

显示导航下拉菜单，而不会降低内容

来自分类Dev

如何仅通过鼠标悬停显示菜单？

来自分类Dev

即使下拉菜单在具有几乎相同CSS的其他页面上也可以使用，但不会显示

来自分类Dev

显示下拉菜单的内容

来自分类Dev

ToolStripSplitButton显示下拉菜单

来自分类Dev

显示下拉菜单的内容

来自分类Dev

下拉菜单不显示

来自分类Dev

我的引导程序下拉菜单类无法显示下拉菜单

来自分类Dev

悬停显示DIV闪烁

来自分类Dev

我需要下拉菜单分别显示和隐藏列

来自分类Dev

我的下拉菜单未显示在父级下方

来自分类Dev

jQuery下拉菜单不显示菜单

来自分类Dev

使用CSS的响应式菜单样式在悬停时显示下拉菜单

来自分类Dev

导航菜单中的下拉菜单没有完全显示，并且悬停时消失了

来自分类Dev

使用CSS的响应式菜单样式在悬停时显示下拉菜单

来自分类Dev

导航菜单中的下拉菜单没有完全显示，并且悬停时消失了

来自分类Dev

悬停时下拉菜单不会下拉

来自分类Dev

我的导航下拉菜单在悬停时不会保持打开状态

Related 相关文章

  1. 1

    悬停不显示下拉菜单

  2. 2

    子菜单悬停显示限制

  3. 3

    在菜单栏外悬停显示 div

  4. 4

    下拉显示下拉菜单上的悬停按钮

  5. 5

    将鼠标悬停在<a>上将不会显示下拉菜单

  6. 6

    将鼠标悬停在<a>上将不会显示下拉菜单

  7. 7

    该引导菜单如何显示悬停下拉菜单？

  8. 8

    在鼠标悬停时显示下拉菜单

  9. 9

    如何创建显示所选变量的悬停式下拉菜单

  10. 10

    在悬停时显示下拉菜单并替换CSS类

  11. 11

    实体化-不会显示下拉菜单

  12. 12

    显示导航下拉菜单，而不会降低内容

  13. 13

    如何仅通过鼠标悬停显示菜单？

  14. 14

    即使下拉菜单在具有几乎相同CSS的其他页面上也可以使用，但不会显示

  15. 15

    显示下拉菜单的内容

  16. 16

    ToolStripSplitButton显示下拉菜单

  17. 17

    显示下拉菜单的内容

  18. 18

    下拉菜单不显示

  19. 19

    我的引导程序下拉菜单类无法显示下拉菜单

  20. 20

    悬停显示DIV闪烁

  21. 21

    我需要下拉菜单分别显示和隐藏列

  22. 22

    我的下拉菜单未显示在父级下方

  23. 23

    jQuery下拉菜单不显示菜单

  24. 24

    使用CSS的响应式菜单样式在悬停时显示下拉菜单

  25. 25

    导航菜单中的下拉菜单没有完全显示，并且悬停时消失了

  26. 26

    使用CSS的响应式菜单样式在悬停时显示下拉菜单

  27. 27

    导航菜单中的下拉菜单没有完全显示，并且悬停时消失了

  28. 28

    悬停时下拉菜单不会下拉

  29. 29

    我的导航下拉菜单在悬停时不会保持打开状态

热门标签

归档