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;
        ...
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • doure5236 2017-02-07 06:08

    Reduce the padding of .dropdown-content a should be like this

       .dropdown-content a 
    {
          color: black;
          padding: 0px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
    }
    
    评论
    解决 无用
    打赏 举报
  • dtgu21994537 2017-02-07 06:24

    I do not understand the problem very well but if the problem is that dropdown is not appearing at all then you have to change your .dropdown:hover .dropdown-content like this.

    .dropdown:hover .dropdown-content{
          display: block;
          z-index: 1;
     }
    

    z-index change html rendering priority according to the number it has, the bigger number is the bigger the priority is.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题