我使用CSS構建了一個下拉菜單。所有的定位都是對的,而且看起來很棒。但是無法點擊子菜單選項。子菜單出現在光標位於導致下拉的按鈕上方,但是一旦光標向下移動,嘗試點擊鏈接,菜單就會消失。我試過改變z-index和定位,但它似乎沒有工作。CSS下拉菜單的問題
(有兩個下拉子菜單,一個接一個,但網站不會讓我發佈html代碼。#navigation指的是整個導航欄,menu是包含submenus和sub_menu的div都是每個單獨的子菜單) CSS代碼是:
#navigation { width: 100%; background: #1C140D; /*BUTTONS*/ }
#navigation ul { margin: 0; padding: 0; width: 100%; }
#navigation ul li { list-style-type: none; display: inline; color:#1C140D; }
#navigation li a { display: block; float: left; padding: 5px 10px; color: #FFFFFF; text-decoration: none; border-right: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; }
#navigation li a:hover { background: #000000; color: #FFFFFF; }
#content-container { float: left; width: 100%; height: 175px; background: #FFFFFF url(/wp-content/uploads/layout-three-fixed-background.gif) repeat-y 100% 0; color: #F2E9E1; }
ul { font-family: Arial, Verdana; font-size: 14px; margin:0; padding:0; list-style:none; }
ul li { display: block; position: relative; float: left; color: #1C140D; }
li ul {display:none; }
ul li a { display: block; text-decoration: none; color: #1C140D; border-top: 1px solid #FFFFFF; padding: 15px 15px 15px 15px; background: #1C140D; /*BUTTONS*/ margin-left: 1px; white-space: nowrap; }
ul li a:hover { background:#1C140D; }
li:hover ul { display: block; }
ul.sub_menu { position:absolute; border-bottom: 1px solid #FFFFFF; color: #1C140D; top: 30px; }
li:hover li { float: none; font-size: 14px; color: #1C140D; }
li:hover a { background: #1C140D; color: #FFFFFF; }
li:hover li a:hover { background: #1C140D; color: #FFFFFF; }