1

このプリントのように、メニューのすべてのレベルで同じ設定 (background-color:#457BB7) を維持しようとしています。

http://img838.imageshack.us/img838/7943/ex1fn.jpg

問題は、マウスが現在のアイテムの上にある場合にのみ、「アクティブ」クラスを追加するときです (例: 「ネットワーク セキュリティ」が強調表示されますが、「セグランサ」と「製品」は通常のままです)。この図のように:

http://img9.imageshack.us/img9/4486/ex2l.jpg

「a」、「li」、「ul」でいろいろ試してみましたが、結果はあまり変わりません。

メニューのコードは次のとおりです (合計ではありません)。

<ul class="Menu">
           <li> <a href="#" style="cursor:default">Soluções</a>
                <ul>
                  <li><a href="seguranca.htm">Segurança</a></li>
                  <li><a href="monit_integ.htm">Monitorização Integrada</a></li>
                  <li><a href="alta_disp.htm">Alta Disponibilidade</a></li>
                  <li><a href="gest_patr.htm">Gestão de Património</a></li>
                  <li><a href="spool.htm">Tratamento de Spool</li>
                </ul>
            </li>
          <li class="active"><a href="#" style="cursor:default">Produtos</a>
                <ul>
                  <li><a href="#" style="cursor:default">Segurança iSeries</a>
                      <ul>
                        <li><a href="net_secur.htm">Network Security</a></li>
                        <li><a href="atrty_broker.htm">Autohority Broker</a></li>
                      </ul>
                  </li> ...

そしてcssはこれです：

.Menu    { margin:0; padding:0; padding-bottom:0; width:700px;}
.Menu ul { margin:0; padding:0; }
.Menu li { float:left; width:150px; list-style:none; position:relative; z-index:999; height:26px; }
.Menu a  { display:block; padding-left:2px; padding-top:2px; color:#FFFFFF; text-decoration:none; vertical-align:middle; overflow:hidden; }

.Menu li ul                                        { top:-999em; position:absolute; text-align:left; }
.Menu li:hover li ul, .Menu li.sfHover li ul       { top:-999em; vertical-align:middle; text-align:left; }
.Menu li li:hover li ul, .Menu li li.sfHover li ul { top:-999em; vertical-align:middle; text-align:left; }

.Menu li:hover ul, ul.Menu li.sfHover ul             { left:0px;  top:26px; font-size:13px; text-align:left;}
.Menu li li:hover ul, ul.Menu li li.sfHover ul       { left:200px; top:2px; font-size:13px; text-align:left;}
.Menu li li li:hover ul, ul.Menu li li li.sfHover ul { left:0px; top:26px; text-align:left;}

.Menu a:hover       { color:#FFFFFF; font-weight:bold;  }
.Menu li:hover      { background-color:#457BB7; color:#FFFFFF; }
.Menu li.sfHover    { background-color:#457BB7; color:#FFFFFF; }

/* superfish */
.superfish li:hover ul, .superfish li li:hover ul, .superfish li li li:hover ul { top: -999em; vertical-align:middle; }

.Menu li            { background-color:#235995; width:100px; height:26px; text-align:center; }
.Menu li li         { background-color:#235995; width:200px; height:18px; float:none;  text-align:left;}
.Menu li li li      { background-color:#235995; width:180px; height:18px; float:none;  text-align:left;}

.Menu li.active         { background-color:#346AA6; width:100px; height:24px; text-align:center; }
.Menu li.active a       { background-color:#346AA6; width:100px; height:24px; text-align:center; }
.Menu li.active li a    { background-color:#235995; width:200px; height:18px; float:none; text-align:left;}
.Menu li.active li li a { background-color:#235995; width:180px; height:18px; float:none; text-align:left;}

.Menu li.active li a:hover { background-color:#457BB7; }
.Menu li.active a:hover { background-color:#457BB7; }

ばかげた何かが欠けていると確信していますが、これを手伝ってもらえますか？

4

1 に答える 1

0

以下のコードはcss、styesで動作します

<ul class="Menu">
   <li> <a href="#" style="cursor:default">Soluções</a>
        <ul>
          <li><a href="seguranca.htm">Segurança</a></li>
          <li><a href="monit_integ.htm">Monitorização Integrada</a></li>
          <li><a href="alta_disp.htm">Alta Disponibilidade</a>
            <ul>
                <li><a href="monit_integ.htm">lorem ipsum</a></li>
                <li><a href="alta_disp.htm">lorem ipsum</a>
            </ul>
          </li>
          <li><a href="gest_patr.htm">Gestão de Património</a></li>
          <li><a href="spool.htm">Tratamento de Spool</li>
        </ul>
    </li>
于 2013-03-28T06:03:27.473 に答える