表格单元格的下拉菜单应该锚定于细胞

Question

权在我的项目 {"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; 
    } 

Answer 1

添加位置：相对于.bottom_menu

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

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