Đường viền menu thả xuống CSS tinh khiết xung quanh bên ngoài chỉ

Question

Tôi đang tạo menu thả xuống css thuần túy (mã ở đây: http://jsfiddle.net/SeXyv/7/) và tôi chỉ muốn có đường viền quanh bên ngoài chứ không phải ở giữa các mục.

Vấn đề tôi gặp phải là ranh giới giữa "chủ đề" và "chủ đề phụ 1" trong ví dụ js.fiddle. Tôi có thể có được một đường viền tất cả các cách giữa hai, nhưng tôi chỉ muốn nó trên phần trên bên phải như một phác thảo, không trực tiếp giữa hai liên kết (nơi vàng và xám đáp ứng)

Bất cứ ai có thể giúp tôi ra đây?

Cảm ơn

EDIT: đây là một pic về những gì tôi muốn biên giới, phần vòng tròn màu đỏ, với biên giới dừng lại khi nó đạt đến tab ở trên nó: http://tinypic.com/view.php?pic=300ehxt&s=6

Answer 1

Về cơ bản bạn đặt một biên giới phía dưới trên yếu tố cuối cùng trong menu thả xuống và một biên giới hàng đầu trên các yếu tố đầu tiên, sau đó cho phép các yếu tố kích hoạt trình đơn thả xuống có giá trị z-index cao hơn menu, sau đó đẩy menu lên chiều rộng của menu

#menu li:hover a {/*increace the z-index over that of the menu*/ 
    ... 
    position:relative; 
    z-index:5; 
} 
#menu li:hover li:first-child a{/*first menuitem gets a top border */ 
    border-top:2px black solid; 
} 
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */ 
    border-bottom:2px black solid; 
} 
#menu li:hover ul{/* move up menu to cover up part of top border*/ 
    position:relative; 
    top:-2px; 
} 

http://jsfiddle.net/SeXyv/14/

Answer 2

thêm <li style="z-index: 5"><a href="#" class="bordertest" >Topic</a> để HTML của bạn. Và thêm lớp được yêu cầu.

Working fiddle here

Điều chỉnh các góc, vv