Question

我是css / html的新手。我正在研究cctccart项目。运行此代码在bottom_menu，点击任何菜单，如产品，白色背景颜色与蓝色合并。我想解决这个问题

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><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>

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: 45px;
   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;
}

Answer 1

我希望它可以帮到你。

Link

HTML

<form id="form1" runat="server">
    <div>
        <br />
        <br />
        <div style="text-align: center;">
            <label class="button">
                <input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
            <label class="button">
                <input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
            <br />
            <br />
            <br />
            <br />
        </div>
        <br />
    </div>
</form>

CSS

.button {
    background: #cfe7fa;
    background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
    background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    border: 1px solid #6393c1;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
    -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
    cursor: pointer;
    display: inline-block;
    font: 10px Arial, Verdana, Geneva, sans-serif;
    line-height: 3px;
    padding-right: 5px;
}
.button:hover .inner {
    opacity:.5;
}
.button input {
    display:none;
}
.button input:checked + .outer .inner {
    opacity:1;
}
.button .outer {
    background:#2989d8;
    background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
    background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    border:1px solid black;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    height:10px;
    margin:5px;
    width:10px;
}
.button .inner {
    background:#e4f5fc;
    background:-moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
    background:-webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background:-o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background:-ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background:radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    display:block;
    height:10px;
    margin:.5px;
    opacity:0;
    -moz-transition:opacity .5s;
    -webkit-transition:opacity .5s;
    -o-transition:opacity .5s;
    transition:opacity .5s;
    width:10px;
}

span.text,
span.outer
{
    display: inline-block;
    vertical-align: middle;
}

Answer 2

将CSS编辑为：

.bottom_menu > li >a {
    display: block;
    text-decoration: none;
    padding: 0px 30px;
    height: 40px; /* this is the thing you have to fix */
    line-height: 35px;
    text-align: center;
}

css中的下拉菜单

2 个答案: