-1

CSS メニューにいくつか問題があります。すべての CSS メニューを再設計し、JavaScript による支援を廃止しています。簡単なことだと思いますので、お手柔らかにお願いします。

最初の問題: ul の上枠を li の右枠に接続しようとしています。 境界線がありません

'ul#nav ul' に上枠を追加しようとしましたが、全体に表示されます。

margin-bottom:-1px を 'ul#nav li:hover > a' に追加して、上の境界線を覆うように下に拡張しようとしましたが、うまくいきません。

2 番目の問題: マウスがスライドアウトでアクティブになっていると、メイン エリアに奇妙なスペースが表示されます。 奇妙な空間

最終問題: サブメニューがある場合に「>」グラフィックを追加するオンライン チュートリアルをいくつか見ましたが、適切な場所に統合できないようです。

コードへのリンクはこちら: http://jsfiddle.net/Bqh9a/

コードは次のとおりです。

<style type="text/css">
.pipe {margin-top:4px;}
.li_hover {color: #002398;}
.bottom_li {margin-bottom:6px;margin-top:2px;}
ul#nav li .bottom_li:hover > a{background:#E0E0E0;}
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
ul#nav li:hover > ul{display:block;}
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;} 
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>}
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
ul#nav ul li:hover ul{display: block;}
</style>

<ul id="nav">
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
</ul>

正しい方向に助けてくれてありがとう。

4

1 に答える 1

1

第 1 号:

これを実現する 1 つの方法は、a リンクの z-index を高くし (z-index:100 @ Line 7)、ul メニューの z-index を -1 にして、'top:23px' を使用してメニューをプルアップすることです。の下に。

しかし、それはちょっとしたハックであり、私があなただったら、これをしようとしないでしょう

第 2 号:

CSS の 7 行目で、:hover スタイルがすべての li に作用し、ネストされているものも含めて、内側の ul に独自のクラスを与える方がはるかに良いでしょう。その後、現時点ではより具体的なスタイルを適用できます。 #nav の下にあるすべての li に、border-left が適用されています。

第 3 号:

別の要素 () を li 内に追加して、右にフロートさせることができます。これには、> 画像または単に > 文字を含めることができます。

JavaScriptを削除していると言っていましたが、jQuery UIメニューを見て、使用するCSSレイアウトを確認する価値があるかもしれません（またはアイコンをつまむためだけに）

于 2013-03-07T19:10:17.177 に答える