即使我将显示置于悬停状态，我的下拉菜单也不会显示答案

【问题标题】：My drop down menu wont show even though I put display to block upon hover即使我将显示置于悬停状态，我的下拉菜单也不会显示
【发布时间】：2016-01-24 14:31:38
【问题描述】：

下拉菜单不适用于我的导航。它被 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/

【问题讨论】：

标签： html css navbar

【解决方案1】：

* {
  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 选择器的更多详细信息，请参阅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>

【讨论】：

有没有办法让它成为直接的孩子，因为当你的解决方案没有按照我想要的方式运行时，它会起作用。首先，它占据了整个空间并将其他导航栏向下推，而不是只在小节内。
好的，我会编辑答案，认为您不应该将下拉菜单放在锚标记中。
好的，谢谢。如果我将子菜单项仅包装在一个链接中并且忘记锚标签并使用直接子选择器（>），这将我带到另一点，它完美地工作。默认情况下是否有一些特定属性分配给锚标记，以防止它成为直接子标记。
这很有意义，谢谢。但是在我的身体里，我将所有东西都声明为块，所以锚现在不会变成块吗？