css html中菜单栏的下拉列表

时间：2015-10-11 17:36:17

标签： html css

我想为每个菜单添加下拉列表，但仅显示＆＃34;产品＆＃34;。首先，我只为＆＃34;产品＆＃34;制作了下拉列表。 menu.But for others菜单无效。

Html代码为： 

<!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Welcome to Cctvcart store</title>
      <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
    <div class="header_wrap">
        <div class="header_top_wrap">
          <div class="header_top">
          </div>
        </div>
        <!--end of header top wrap -->
        <div class="header_bottom_wrap">
          <div class="header_bottom">
            <ul class="bottom_menu">
              <li class="dropdown"><li><a href="#">Company</a>

              <ul class="submenu">
                  <li><a href="#">About us</a>
                  </li>
 <li><a href="#">New Realeses</a>
                  </li>
 <li><a href="#">Contact us</a>
                  </li>
              </ul>
               </li>
              <li class="dropdown"><a  href="#">Products</a>
                <ul class="submenu">
                  <li><a href="#">DVR & Kits</a>
                  </li>
                  <li><a href="#">Seurity Cameras</a>
                  </li>
                  <li><a href="#">Spy Camreas</a></li>
                   <li><a href="#">Wireless & IP Cameras</a></li>
                    <li><a href="#">Accessories</a></li>
                     <li><a href="#">Mini Video</a></li>
                </ul>
              </li>

              <li><a href="#">Services</a>

              </li>
              <li class="dropdown"><li><a href="#">Support</a>
                <ul class="submenu">
                  <li><a href="#">Support Home</a>
                  </li>
 <li><a href="#">Warranty</a>
                  </li>
<li><a href="#">Feedback</a>
                  </li>
<li><a href="#">Contact Tech Support</a>
                  </li>

              </li>
             <li class="dropdown"> <li><a href="#">Multimedia</a>
   <ul class="submenu">
                  <li><a href="#">Video</a>
                  </li>
 <li><a href="#">Podcasts</a>
                  </li>
              </li>
            </ul>
           </div>
        </div>
        <!--end of bottom  wrap -->
      </div>
      <!--end of header wrap -->
      <div class="main_wrap">
        <div class="main">
        </div>
        <!--end of main  -->
      </div>
      <!--end of main wrap -->
      <div class="footer_wrap">
        <footer></footer>
      </div>
      <!--end of footer wrap -->
      </body>
      </html>

的style.css： 

 * {
       margin: 0px;
       padding: 0px;
     }
     .header_wrap {
       width: 100%;
       height: 160px;
       background: red;
       position: relative;
     }
     .main_wrap {
       width: 100%;
       height: 1475px;
       background: green;
     }
     .footer_wrap {
       width: 100%;
       height: 325px;
       background: aqua;
     }
     .main {
       width: 1000px;
       height: 100%;
       background: blue;
       margin: auto;
     }
     footer {
       width: 1000px;
       height: 100%;
       background: aqua;
       margin: auto;
     }
     .header_top_wrap {
       width: 100%;
       height: 23px;
       background: #ccc;
     }
     .header_bottom_wrap {
       width: 100%;
       height: 40px;
       background: #06F;
       position: absolute;
       bottom: 0px;
       left: 0px;
     }
     .header_top {
       width: 1000px;
       height: 100%;
       background: purple;
       margin: auto;
     }
     .header_bottom {
       width: 1000px;
       height: 100%;
       background: black;
       margin: auto;
     }
     .bottom_menu > li {
       display: inline-block;
     }
     .bottom_menu a
     {
         font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
         color: #fff;

     }
     .bottom_menu > li >a {
       display: block;
       text-decoration: none;


       padding: 0px 30px;
       height: 40px;
       line-height: 35px;
       text-align: center;
     }
    .bottom_menu > li:hover >a
    {
        background:#fff;
        color:#151716;
    }
    .submenu  a:active, .submenu  a:visited{
      display: block;
      color: #fff;
      text-decoration: none;
      z-index: 21;
    }
    .submenu {
      position: absolute;
      display: none;
      width:160px;
      height:250px;
      background:white;
      list-style:none;
    }
    .dropdown:hover > .submenu{
      display: block;

    }
    .submenu>li>a
    {
        display:block;
        width:100%;
        height:42px;
        background:black;
        text-decoration:none;
        line-height:58px;
        padding-left:50px;
        border:1px dashed white;
    }

2 个答案:

答案 0 :(得分：2)

问题在于：

<li class="dropdown"><li><a href="#">Company</a>

你有两个<li>。请删除一个。您也忘了在</ul>：

之后加入此内容 
      </li>
    </ul>
  </li>
</ul>

这是一个工作片段：

＆＃13;
＆＃13; 
* {
  margin: 0px;
  padding: 0px;
}
.header_wrap {
  width: 100%;
  height: 160px;
  background: red;
  position: relative;
}
.main_wrap {
  width: 100%;
  height: 1475px;
  background: green;
}
.footer_wrap {
  width: 100%;
  height: 325px;
  background: aqua;
}
.main {
  width: 1000px;
  height: 100%;
  background: blue;
  margin: auto;
}
footer {
  width: 1000px;
  height: 100%;
  background: aqua;
  margin: auto;
}
.header_top_wrap {
  width: 100%;
  height: 23px;
  background: #ccc;
}
.header_bottom_wrap {
  width: 100%;
  height: 40px;
  background: #06F;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.header_top {
  width: 1000px;
  height: 100%;
  background: purple;
  margin: auto;
}
.header_bottom {
  width: 1000px;
  height: 100%;
  background: black;
  margin: auto;
}
.bottom_menu > li {
  display: inline-block;
}
.bottom_menu a
{
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
  color: #fff;

}
.bottom_menu > li >a {
  display: block;
  text-decoration: none;
  padding: 0px 30px;
  height: 40px;
  line-height: 35px;
  text-align: center;
}
.bottom_menu > li:hover >a
{
  background:#fff;
  color:#151716;
}
.submenu  a:active, .submenu  a:visited{
  display: block;
  color: #fff;
  text-decoration: none;
  z-index: 21;
}
.submenu {
  position: absolute;
  display: none;
  width:160px;
  background:white;
  list-style:none;
}
.dropdown:hover > .submenu{
  display: block;

}
.submenu>li>a
{
  display:block;
  width:100%;
  height:42px;
  background:black;
  text-decoration:none;
  line-height:58px;
  padding-left:50px;
  border:1px dashed white;
}
＆＃13; 
<div class="header_wrap">
  <div class="header_top_wrap">
    <div class="header_top">
    </div>
  </div>
  <!--end of header top wrap -->
  <div class="header_bottom_wrap">
    <div class="header_bottom">
      <ul class="bottom_menu">
        <li class="dropdown"><a href="#">Company</a>

          <ul class="submenu">
            <li><a href="#">About us</a></li>
            <li><a href="#">New Realeses</a></li>
            <li><a href="#">Contact us</a></li>
          </ul>
        </li>
        <li class="dropdown"><a  href="#">Products</a>
          <ul class="submenu">
            <li><a href="#">DVR & Kits</a></li>
            <li><a href="#">Seurity Cameras</a></li>
            <li><a href="#">Spy Camreas</a></li>
            <li><a href="#">Wireless & IP Cameras</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Mini Video</a></li>
          </ul>
        </li>
        <li><a href="#">Services</a></li>
        <li class="dropdown">
          <a href="#">Support</a>
          <ul class="submenu">
            <li><a href="#">Support Home</a></li>
            <li><a href="#">Warranty</a></li>
            <li class="dropdown">
              <a href="#">Multimedia</a>
              <ul class="submenu">
                <li><a href="#">Video</a></li>
                <li><a href="#">Podcasts</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <!--end of bottom  wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
  <div class="main">
  </div>
  <!--end of main  -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
  <footer></footer>
</div>
<!--end of footer wrap -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

只需取下<li>，因为你做了两次。 这是一个有效的Jsfiddle https://jsfiddle.net/v7dLps8b/

相关问题
最新问题