css html中菜单栏的下拉列表_Html_Css

css html中菜单栏的下拉列表

html css

css html中菜单栏的下拉列表,html,css,Html,Css,我想为每个菜单添加下拉列表，但它只显示“产品”。首先，我只为“产品”菜单做了一个下拉列表。但对于其他菜单，它不起作用 Html代码是： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Welcome to Cctvcart store</title> <link rel="stylesheet"

我想为每个菜单添加下拉列表，但它只显示“产品”。首先，我只为“产品”菜单做了一个下拉列表。但对于其他菜单，它不起作用

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>

 * {
       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;
    }

只要取下

，因为你做了两次。这是一个有效的JSFIDLE

问题在于：

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

一切都很好，但当单击下拉列表中的“公司”和“多媒体”时，白色部分仍然是如何删除的part@panky给这个CSS:

。子菜单{height:auto；}

@panky请在更新的答案中找到正确的代码段<代码>：）我知道了，但是兄弟的“mulitemedia”选项不是showing@panky我不知道为什么，但如果你把鼠标放在多媒体上，它会工作。我得到了它，但当点击“服务”时，什么也没有出现，“多媒体”按钮和服务在哪里，你没有它的列表

      </li>
    </ul>
  </li>
</ul>