个人中心
gpt4 book ai didi

html - 子导航未出现

转载 作者：行者123 更新时间：2023-11-28 01:52:04 25 4
gpt4 key购买 nike

请参阅下面的代码。当您将鼠标悬停在“商店”上时，我正在努力让我的 SubNav 出现。我从其他有效的元素中复制了下面的部分代码，但现在什么也没有发生。对于 SubNav，我只是在寻找下拉菜单并显示其他元素。这将出现在网站的所有页面上。有什么建议么？谢谢!

/* stlyes for body */

body {
  font-family: 'Trocchi', serif;
  background-color: white;
  margin: 0px;
  width: 900px;
  margin: 0 auto;
  border: 3px solid #FEFA91;
}

h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}

a {
  font-weight: bold;
  color: white;
}

a:link,
a:visited {
  color: black;
}

a:hover,
a:focus {
  color: #FEFA91;
}


/* Header */

header {
  background-color: #FEFA91;
  width: 100%;
}

header img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-top: 5px;
}


/* the styles for the navigation menu */

#nav_menu {
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

#nav_menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
}

#nav_menu ul li {
  float: left;
  width: 25%;
}

#nav_menu ul li a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  text-decoration: none;
  background-color: #FEFA91;
  color: black;
}

#nav_menu a.current {
  color: white;
}

#nav_menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

#nav_menu ul ul li {
  float: none;
}

#nav_menu ul li a:hover,
#nav_menu ul li a:focus {
  background-color: black;
  color: white;
}

#nav_menu ul li:hover>ul {
  display: block;
}

#nav_menu>ul:after {
  content: "";
  clear: both;
  display: block;
}


/* Main */

main {
  padding: 20px;
  max-width: 950px;
  height: auto;
}


/* Section */

section {
  width: 660px;
  margin: 0;
  padding: 11px 0 0 0;
}

section img {
  padding: 0 15px 10px 15px;
}

section p {
  text-align: left;
  margin: 10px;
}

section dl {
  font-size: 13px;
  text-indent: 30px;
  padding: 20px 0 0 0;
}

section h1 {
  font-size: 35px;
  font-family: 'Euphoria Script', cursive;
}


/* Aside 1 */

#aside1 {
  width: 150px;
  height: 310px;
  float: left;
  background-color: #FEFA91;
  padding: 10px 0 0 0;
  text-align: center;
}

#aside1 img {
  text-align: center;
}


/* Aside 2 */

#aside2 {
  width: 150px;
  height: 310px;
  float: right;
  background-color: #FEFA91;
  padding: 10px 0 0 0;
  text-align: center;
}

#aside2 img {
  text-align: center;
}

#aside2 h2 {
  font-size: 15px;
}

#aside2 p {
  font-size: 13px;
}

#aside2 hr {
  border: 1px #000000 solid;
}


/* Footer */

footer {
  clear: both;
  padding: 15px;
  background-color: #FEFA91;
  position: relative;
}

footer p {
  font-size: 90%;
  text-align: right;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Ears To You Boutique - Holiday Ears</title>
  <link rel="shortcut icon" href="../images/tansp.png">
  <link rel="stylesheet" href="../styles/normalize.css">
  <link rel="stylesheet" href="../styles/ears.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Euphoria+Script">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trocchi">
</head>

<body>
  <header>
    <a href="../index.html"><img src="../images/rsz_logo.png" alt="Logo" height="100" class="center"></a>
  </header>
  <nav id="nav_menu">
    <ul>
      <li><a href="../pages/about.html">About</a></li>
      <li><a href="../pages/shop.html">Shop</a>
        <ul>
          <li><a href="../pages/holidayears.html">Holiday</a></li>
          <li><a href="../pages/characterears.html">Character</a></li>
          <li><a href="../pages/eventears.html">Event</a></li>
        </ul>
      </li>
      <li><a href="../pages/gallery.html">Gallery</a></li>
      <li><a href="../pages/calendar.html">Calendar</a></li>
    </ul>
  </nav>
  <main>
    <aside id="aside1">
      <img src="../images/castle.jpg" width="125px">
      <img src="../images/christmas2.jpg" width="125px">
      <img src="../images/christmas3.jpg" width="125px">
    </aside>
    <section>
      <img src="../images/christmas1.jpg" width="220px" style="float:left">
      <h1>Christmas Ears</h1>
      <p>Do you love Christmas?
        <br />If so, these red and green ears featuring ice skating elves are perfect for you!</p>
      <p>Purchase at <a href="http://www.etsy.com" target="_blank">Etsy.com</a></p>
      <dl>
        <dt>Bow: Red</dt>
        <dt>Band: Green</dt>
        <dt>Ears: Red & Green with Elves</dt>
      </dl>
    </section>
    <aside id="aside2">
      <h2>Shop Other <br />Holiday Ears</h2>
      <hr>
      <br />
      <img src="../images/halloween.jpg" width="125px">
      <p>Halloween</p>
      <br />
      <br />
      <img src="../images/spring.jpg" width="125px">
      <p>Spring</p>
    </aside>
  </main>
  <footer>
    <p>
      <a href="http://www.facebook.com" target="blank"><img src="../images/face.png" width="40"></a>
      <a href="http://www.instagram.com" target="blank"><img src="../images/insta.jpg" width="36"></a>
      <a href="http://www.pinterest.com" target="blank"><img src="../images/pin.jpg" width="40"></a>
    </p>
  </footer>
</body>

</html>

最佳答案 

#nav_menu {
  display: block;
  overflow: hidden; //remove
  width: 100%;
  margin: 0;
  padding: 0;
}
#nav_menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%; // added
}

关于html - 子导航未出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49865326/

25 4 0
文章推荐： javascript - 如何调整div的大小以填充所有空间
文章推荐： c++ - 如何将多个数组作为 C++ 中的输入？
文章推荐： c++ - 以目录作为参数运行 C++ 文件？使用 Bash 代替？
文章推荐： javascript - 我怎样才能在 chrome 扩展弹出窗口中嵌入网站
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com