0

CSSに3つの質問があります。開発者であることは設計のプロではありませんが、この問題を解決する必要があります。次のようなナビゲーションバーがあります。

<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;
}

「About」にカーソルを合わせるとドロップダウンが表示されますが、1。少しでも動かすと消えて「Items」をクリックできなくなります。2。aboutのホバー状態で背景色が緑色になります。ホバーの領域を増やします。3. #primary li：hover> ulについて説明しましたが、「>」は実際に何をしますか？

4

1 に答える 1

2

  1. 上部のcssを削除し、＃primary li：hoverulの左側を削除します

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

  2. パディングを増やします。

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

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

3。「>」は子要素のセレクターです（詳細）

于 2012-10-18T08:33:06.490 に答える