dtrpv60860 2017-02-07 05:55
浏览 55
已采纳

怎么处理我的css下拉菜单上的差距?

I badly need help with my css coding. newbie here.

#accountTitle
padding: 0;
display: block;
margin-top: 90px;
margin-bottom: -120px;
margin-left: 50px;
font-size: 36px;


a:active 
background-color: #a6d8a8;




table 
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 50px;
overflow-x:auto;


 td 
  text-align:left;

   th, td

padding: 15px;



th 
    background-color: #4CAF50;
    color: white;
    text-align: center;



tr:hover 
background-color: #a6d8a8;
cursor: pointer;




#container 
margin-top: 135px;
position: relative;
padding: 0;
overflow: hidden;
background-color: #333;
border-radius: 10px;
width: 100%;




.wrap
margin-right: 10px;
text-align: center;



.dropbtn

background-color: #333;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;



.dropdown 
position: relative;
display: inline-block;
margin-right: 5px;



   .dropdown-content 

    display: none;
    position: fixed;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;


     .dropdown-content a 
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;


        .dropdown-content a:hover 
         background-color: #f1f1f1

         .dropdown:hover .dropdown-content
          display: block;



          .dropdown:hover .dropbtn 
           background-color: #434343;



<label id="accountTitle">Audit Log</label>
<div id="container">
<div class="wrap">
<div class="dropdown">
<button class="dropbtn" id="homebtn">Home</button>
<div class="dropdown-content">
<a href="#">Main Page</a>
<a href="#">Accounts</a>
<a href="#">Audit Log</a>
<a href="#">Logout</a>
</div>
</div>

The problem here is that, whenever I scroll down this happens

enter image description here

please i really need to finish this.

  • 写回答

3条回答 默认 最新

  • douzhiba6873 2017-02-07 06:45
    关注

    take the overflow out of #container and change the position on .dropdown-content to absolute

    #container {
        ...
        padding: 0;
        /* overflow: hidden; DELETE THIS */
        background-color: #333;
        ...
    }
    
    .dropdown-content {
        display: none;
        position:  absolute;
        ...
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能