表格单元格下拉菜单应固定在单元格的右侧

时间：2015-10-13 07:25:14

标签： html css drop-down-menu menu

在我的项目中 {"company","products","service","support","multimedia"}

应该是绿色所在内容区域的左侧，并且点击这些链接中的任何一个

{"company","products","service","support","multimedia"}

其下拉菜单应位于右侧

 <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 Cctvcart</a></li>
                            <li><a href="#">New Releases</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 class="dropdown"><a href="#">Services</a>
                        <ul class="submenu">
                            <li><a href="#">Warranty Registration</a></li>
                            <li><a href="#">Professional Installation</a></li>
                        </ul>
                    </li>

                    <li class="dropdown"><a href="#">Support</a>
                        <ul class="submenu">
                            <li><a href="#">Support Home</a></li>
                            <li><a href="#">Support Center</a></li>
                            <li><a href="#">Customer Feedback</a></li>
                            <li><a href="#">Contact Tech Support</a></li>
                            <li><a href="#">DVR DDNS Portal</a></li>
                        </ul>
                    </li>

                    <li class="dropdown"><a href="#">Multimedia</a>
                        <ul class="submenu">
                            <li><a href="#">Cctvcart Videos</a></li>
                            <li><a href="#">Podcasts</a></li>
                            <li><a href="#">Video Instruction Guides</a></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>

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;*/
         display : list-item;
     }
     .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:200px;
      height:auto;
      background:white;
      list-style:none;*/
        position: absolute;
        margin: 0 auto;
        left: calc(30% - 50px);
        display: none;
        width: 200px;
        height: auto;
        background: #FFF;
        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:20px;
        border:1px dashed white;
    }

1 个答案:

答案 0 :(得分：1)

添加位置：相对于.bottom_menu

＆＃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 {
   list-style: none;
   position: relative;
 }
 
 .bottom_menu > li {
   /*display: inline-block;*/
   
   display: list-item;
 }
 
 .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:200px;
      height:auto;
      background:white;
      list-style:none;*/
   
   position: absolute;
   /* margin: 0 auto; */
   /* left: calc(30% - 50px); */
   right: calc(20% - 50px);
   display: none;
   width: 200px;
   height: auto;
   background: #FFF;
   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: 20px;
   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 Cctvcart</a></li>
            <li><a href="#">New Releases</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 class="dropdown"><a href="#">Services</a>
          <ul class="submenu">
            <li><a href="#">Warranty Registration</a></li>
            <li><a href="#">Professional Installation</a></li>
          </ul>
        </li>

        <li class="dropdown"><a href="#">Support</a>
          <ul class="submenu">
            <li><a href="#">Support Home</a></li>
            <li><a href="#">Support Center</a></li>
            <li><a href="#">Customer Feedback</a></li>
            <li><a href="#">Contact Tech Support</a></li>
            <li><a href="#">DVR DDNS Portal</a></li>
          </ul>
        </li>

        <li class="dropdown"><a href="#">Multimedia</a>
          <ul class="submenu">
            <li><a href="#">Cctvcart Videos</a></li>
            <li><a href="#">Podcasts</a></li>
            <li><a href="#">Video Instruction Guides</a></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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题