面板後面垂直滾動條

Question

我有一個面板，其消失的背後滾動條消失，見截圖

這是CSS

#menu { 
    list-style:none; 
    width:350px; 
    height:30px; 
    padding:0px 10px 0px 10px; 
    margin-top: 10px; 
} 

#menu li { 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    padding: 4px 10px 4px 10px; 
    margin-right:30px; 
    margin-top:7px; 
    border:none; 
} 

#menu li:hover { 
    border: 1px solid #777777; 
    padding: 4px 9px 4px 9px; 

    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 

#menu li a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    color: #EEEEEE; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
} 

#menu li:hover a { 
    color:#161616; 
    text-shadow: 1px 1px 1px #ffffff; 
} 
#menu li .drop { 
    padding-right:21px; 
    background:url("../images/arrow.gif") no-repeat right 8px; 
} 
#menu li:hover .drop { 
    background:url("../images/arrow.gif") no-repeat right 7px; 
} 

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns { 
    margin:4px auto; 
    float:left; 
    position:absolute; 
    left:-999em; /* Hides the drop down */ 
    z-index: 9999; 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #777777; 
    border-top:none; 

    /* Gradient background */ 
    background:#F4F4F4; 
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); 

    /* Rounded Corners */ 
    -moz-border-radius: 0px 5px 5px 5px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
    border-radius: 0px 5px 5px 5px; 
} 


.dropdown_2columns {width: 450px; min-height: 300px;} 


#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
    left:-1px; 
    top:auto; 
} 

.col_1, 
.col_2, 
.col_3, 
.col_4, 
.col_5 { 
    display:inline; 
    float: left; 
    position: relative; 
    margin-left: 5px; 
    margin-right: 5px; 
} 
.col_1 {width:130px;} 
.col_2 {width:270px;} 
.col_3 {width:410px;} 
.col_4 {width:550px;} 
.col_5 {width:690px;} 

#menu .menu_right { 
    float:right; 
    margin-right:0px; 
} 
#menu li .align_right { 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 0px 5px 5px; 
    -webkit-border-radius: 5px 0px 5px 5px; 
    border-radius: 5px 0px 5px 5px; 
} 

#menu li:hover .align_right { 
    left:auto; 
    right:-1px; 
    top:auto; 
} 

#menu li:hover div a { 
    font-size:12px; 
    color:#015b86; 
} 
#menu li:hover div a:hover { 
    color:#029feb; 
} 

和HTML

<ul id="menu"> 

    <li><a href="index.php/extensions" class="drop">Extensions</a> 

     <div class="dropdown_2columns"> 



     </div> 

    </li> 

    <li><a href="index.php/forum/index" class="drop">Forum</a> 

     <div class="dropdown_2columns"> 



     </div> 

    </li> 

    <li><a href="#" class="drop">Blog</a> 

     <div class="dropdown_2columns"> 



     </div> 

    </li> 

</ul> 

我該如何防止這種情況發生？我能以某種方式從右到左顯示面板嗎？這個時候我真的不知道如何更好地解釋我自己。

請提供援助，

在此先感謝

Answer 1

decided to go with this one

看起來不錯，效果很好