html - 即使我在悬停时阻止显示,我的下拉菜单也不会显示

标签 html css navbar

下拉菜单不适用于我的导航。它通过显示隐藏:无但是在悬停时没有显示任何内容,即使我指定当包含 UL 的 anchor 标记悬停在上方时显示子元素被阻止。

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 不是您的 anchor 标记的直接子级,它立即放置在 anchor 标记之后。您使用的选择器是 X > Y,它选择直接子级(有关 css 选择器的更多详细信息,请参阅 link。)

我所做的改变

更改了您的标记结构,在其中添加了 li,这在之前并不存在,并导致了我上面提到的下拉菜单的奇怪行为。

将您的 css 选择器从 X > Y 更改为 X X + 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>

关于html - 即使我在悬停时阻止显示,我的下拉菜单也不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33329704/

相关文章:

一个元素上有两个类的 CSS 选择器

css - 带图像的水平导航栏 + CSS 中的文本

java - Android - 使用 JSOUP 实现具有 AsyncTask 的 ListView

html - section inline-block 100% height 在固定容器中折叠

javascript - 打印功能无法正常工作

css - 响应式网站文本对齐问题

html - 为什么在这种情况下需要负 margin 顶部

html - Flexbox 高度增长问题

angular - 如何在 Angular 5 的 ngx-bootstrap 中使用 Bootstrap 导航栏?

html - CSS - 对齐固定导航栏下方的内容