懸停元素的寬度應該會增加高亮框的大小並保留下拉菜單

Question

我在CSS中有三個問題。作爲一名開發人員而非設計專業人士，但需要解決這個問題。 我有一個導航欄，看起來是這樣的：

<nav id="primary"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a> 
      <ul> 
      <li><a href="#" class="outer"><span class="arrow">></span>Item1</a></li> 
      <li><a href="#" class="outer"><span class="arrow">></span>Item2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

我的嵌入式CSS看起來像

#primary ul li ul 
{ 
display: none; 
} 
#primary li:hover >ul 
{ 
    display: block; 
    position: absolute; 
    background: #bfe9f7; 
    -webkit-border-shadow :0 1px 1px rgba(0,0,0,.2); 
    -moz-box-shadow:0 1px 1px rgba(0,0,0,.2); 
    box-shadow: 0 1px 1px rgba(0,0,0,0.2); 
} 
#primary ul li 
{ 
    display: inline; 
} 
#primary li:hover 
{ 
    position: relative; 
} 
#primary li a:hover 
{ 
    background: #8ac142; 
} 
#primary li:hover ul 
{ 
    left: 0px; 
    top: 30px; 
    padding: 3px; 
    width: 180px; 
} 
.arrow 
{ 
    color: #009aca; 
} 
#primary ul li ul li a.outer 
{ 
    color: #3d3d3d; 
    -webkit-box-shadow: 0px 4px 2px -2px #4cbadd; 
    -moz-box-shadow: 0px 4px 2px -2px #4cbadd; 
    box-shadow: 0px 4px 2px -2px #4cbadd; 
} 

現在，當我將鼠標懸停在「關於」顯示在下拉但是， 1 。如果我移動了一點，它就會消失，使我無法點擊「項目」。 2.關於懸停狀態給出背景顏色綠色我想增加懸停區域。 3.我已經提到#primary li：hover> ul這個'>'實際上做了什麼？

Answer 1

1. 的頂部取下CSS和離開#primary李：懸停UL

   #primary li:hover ul 
   { 
       padding:10px; 
       width: 180px; 
   } 
   

2. 增加您的填充。

   #primary ul li ul li a.outer 
   { 
       padding:5px; 
   }​ 
   

   例：http://jsfiddle.net/j2NsZ/3/

3 '>' 是的子元素（more info）