Question

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

Answer 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的标记结构，导致了我上面提到的下拉菜单的奇怪行为。

从X＆gt;更改了您的css选择器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>

即使我在悬停时将显示设置为阻止，我的下拉菜单也不会显示

1 个答案: