悬停元件的宽度应增加突出显示的框尺寸并保留下拉列表

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：悬停> ul'>'实际上是什么？

Answer 1

1. 删除顶部的CSS，左右左右#primary li：Hover 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。'>'是儿童元素的选择器（更多信息）