2013-06-26 35 views
5

Tôi đang cố tạo một menu con nổi bên phải. Tuy nhiên, tôi đã đánh một bức tường gạch và chỉ có thể làm cho nó nổi trên mặt đất.Trình đơn thả xuống CSS (ở bên phải)

http://jsfiddle.net/jspring/yD9N4/

Bạn có thể xem tại đây (mặc dù nó là một chút rộng hơn so với bình thường) mà menu phụ chỉ hiển thị bên trong mục danh sách cha mẹ. Nếu ai đó có thể giúp tôi làm nổi nó ở bên phải, điều đó thật tuyệt vời!

<ul class="cl-menu"> 
    <li>Link 1 
     <ul> 
      <li><a href="#">Sub Link 1</a> 
      </li> 
      <li><a href="#">Sub Link 2</a> 
      </li> 
     </ul> 
    </li> 
    <li>Link 2 
     <ul> 
      <li><a href="#">Sub Link 1</a> 
      </li> 
      <li><a href="#">Sub Link 2</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

.cl-menu{ 
    list-style:none outside none; 
    display:inline-table; 
    position:relative; 
    width:100%; 
} 
.cl-menu li{ 
    list-style:none outside none; 
    border-bottom:1px solid #cccccc; 
    padding:5px 1px; 
    text-align:center; 

} 
.cl-menu > li:hover{ 

    /*background-color:#303030;*/ 
    background-color:#66819C; 
    color:#FFF; 
    font-weight:bold; 
    text-decoration:underline; 
    opacity:1; 
} 

.cl-menu li ul{ 
    display:none; 
} 

.cl-menu li:hover ul{ 
    display:block; 
    opacity:0.8; 
    background-color:#FFF; 
    margin-top:4px; 
    font-weight:normal !important; 
} 

.cl-menu li ul li{ 
    border-bottom:1px solid #cccccc !important; 
    border-top:none !important; 
    border-left:none !important; 
    border-right:none !important; 
} 

.cl-menu li ul li a{ 
    color:#000; 
    text-decoration:none; 
} 

.cl-menu li ul li a:hover{ 
    color:#390; 
    text-decoration:underline; 
} 

.cl-menu ul:after{ 
    content:""; 
    clear:both; 
    display:block; 
} 

Trả lời

3

Sử dụng vị trí: tuyệt đối thuộc tính cho menu phụ. Sử dụng ngay thuộc tính css để định vị menu con đúng cách.

.cl-menu li ul 
    { 
     display:none; 
     position:absolute; 
     right:20%; 
    } 
+0

Chấp nhận câu trả lời nếu giải quyết được sự cố của bạn. Hoặc nhận xét nếu bạn cần thêm trợ giúp. – aBhijit

Các vấn đề liên quan