Question

我想在产品的下拉菜单中带3件物品（Dvr＆amp; Kits.spy camares，alarmes），但这些物品也在水平方向内进入bottom_menu 请帮助我，我是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 > li >a {
   display: block;
   text-decoration: none;
   color: #fff;
   font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
   padding: 0px 65px;
   height: 45px;
   line-height: 45px;
   text-align: center;
 }

<!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><a href="#">Company</a>



          </li>
          <li><a href="#">Products</a>
            <u1 class="submenu">
              <li><a href="#">DVR & Kits</a>
              </li>
              <li><a href="#">spy camraes</a>
              </li>
              <li><a href="#">alarms</a>
              </li>
            </u1>
          </li>

          <li><a href="#">Services</a>
          </li>
          <li><a href="#">Support</a>
          </li>
          <li><a href="#">Multimedia</a>
          </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>

Answer 1

divy3993告诉过你关于你的事情......

接下来想到的是为您的产品添加下拉类

然后

* {
   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 > li >a {
   display: block;
   text-decoration: none;
   color: #fff;
   font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
   padding: 0px 65px;
   height: 45px;
   line-height: 45px;
   text-align: center;
 }

.submenu  a:active, .submenu  a:visited{
  display: block;
  color: #fff;
  text-decoration: none;
  z-index: 21;
}
.submenu {
  position: absolute;
  display: none;
}
.dropdown:hover > .submenu{
  display: block;
}

  <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><a href="#">Company</a> </li>
          <li class="dropdown"><a  href="#">Products</a>
            <ul class="submenu">
              <li><a href="#">DVR & Kits</a>
              </li>
              <li><a href="#">spy camraes</a>
              </li>
              <li><a href="#">alarms</a>
              </li>
            </ul>
          </li>

          <li><a href="#">Services</a>
          </li>
          <li><a href="#">Support</a>
          </li>
          <li><a href="#">Multimedia</a>
          </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 -->

CSS：水平显示的菜单下拉列表

1 个答案: