1

サイトの上にこのナビゲーション バーを作成するのに苦労しています。

私のhtml atmには次のものがあります。このナビゲーション バーは、そのページの 2 番目のナビゲーション バーであるため、li と a のクラスであることに注意してください。(サブリストのクラス/IDも作成する必要がありますか?)

<div id="navbar2">
      <ul>
          <li class="list"><a class="link" href="<?php echo base_url() ?>index.php/A">A</a></li>
          <li class="list"><a class="link" href="">B</a></li>
          <li class="list"><a class="link" href="">C</a></li>
          <li class="list"><a class="link" href="">D</a></li>
          <li class="list"><a class="link" href="">Browse</a>
              <ul>
                  <li><a href="">By Category</a>
                      <ul>
                          <li><a href="">k</a></li>
                          <li><a href="">l</a></li>
                          <li><a href="">m</a></li>
                          <li><a href="">n</a></li>
                          <li><a href="">o</a></li>
                          <li><a href="">p</a></li>
                          <li><a href="">q</a></li>
                          <li><a href="">r</a></li>
                      </ul>
                  </li>
                  <li><a href="">By Uploader</a></li>
              </ul>
          </li>
          <li class="list"><a class="link" href="">E</a></li>
      </ul>
 </div>

css を実装する方法はありますか? マウスを「ブラウズ」に合わせると、「カテゴリ別」と「アップローダー別」の 2 つのドロップダウン リストが表示され、同時にマウスが「カテゴリ別」の上に置かれたときに、表示されるサブリスト。マウスがホバリングしていないときは、ドロップダウン/サブリストを非表示にします。

さらに、このページにいるとき、リスト「A」の背景を他のリストよりも暗くしたいと思います（現在のリンク）。

私はウェブサイトの構築にまったく慣れていないため、初心者の質問をして申し訳ありません:)

ご協力いただきありがとうございます！

4

3 に答える 3

1

前に述べたように (position:relativeと)、 jsFiddleposition: absoluteで css の例を作成しました

a { color: gray; }
#navbar2 li:first-child a { color: black } /* make the letter A black */
#navbar2 li li:first-child a { color: gray } /* all others gray */

#navbar2 {}

/* Level 1 */
#navbar2 ul { padding: 5px;}
#navbar2 li {
    display: inline;
    position: relative; /* set the li-elements to relative, so the child-elements will be positioned on the parent element */
    white-space: nowrap;
}

/* Level 2 */
#navbar2 ul ul {
    display: none;
    position: absolute;
    top: 15px;
    left: 0
}
#navbar2 li:hover ul { display: inline } /* show the second-level nav.. */
#navbar2 li:hover ul ul { display: none } /* but hide the 3rd */
#navbar2 li li {
    /* show the list, line after line */
    float:left;
    clear: left;
}

/* Level 3 */
#navbar2 ul ul ul {
    display: none; /* hide by default */
    width: 100px;
    background: #eee;
}
#navbar2 li li:hover ul {
    display: inline;
    left: 25px;
    z-index: 50;
}

jQuery は、IE6 で機能させるのに適したオプションです。IE6 では、:hover は a タグ以外の要素では機能しません。

于 2012-06-03T16:44:40.980 に答える
0

CSS ではこれを行いませんが、代わりに jquery hover オプションを使用します。navbar を position: relative に設定する必要があり、ドロップダウン メニューは絶対にする必要があります。したがって、あなたのサブULにクラスを追加します。カテゴリごとの ul のスタイルを設定して、メイン ナビゲーションの下に正しく配置されるようにする必要があります。

次に、jQuery hover を使用して、ホバー時にカテゴリ別 ul を表示/非表示にします。したがって、これには、「参照」またはそのリンクをラップするliで一意のIDまたはクラスが必要になります。

#navbar2 { position: relative; }
#by-category { position: absolute; }
于 2012-06-03T16:02:10.457 に答える
0

これは私が作ったものです-

<style>
#navbar2 li{ border-radius:5px;list-style-type:none; list-style-position:inside; border:1px solid #bbb; padding:5; background:#383838; width:50}

#navbar2 .list:first-child{background:#fc7;} 

#navbar2 .list:first-child a{color:#383838}

#navbar2 a,#navbar2 a:visited{ text-decoration:none; color:#fc7}

#navbar2 .list{ float:left; }

#navbar2 a:hover{ color:blue }

#navbar2 li ul{ height:0; width:0; }

#navbar2 ul li ul li{ position:relative; top:5; width:100; left:-46; }

#navbar2 ul li ul{ display:none }

#navbar2 ul li ul li:first-child ul li{ left:65; top:-24; width:50; display:none}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$(document).ready(function(){ 
  $("#navbar2 ul li:eq(4)").mouseenter(function(){ 
    $("#navbar2 ul li ul").fadeIn(600);
  });
  $("#navbar2 ul li:eq(4)").mouseleave(function(){ 
    $("#navbar2 ul li ul").fadeOut(600); 
  }); 
  $("#navbar2 ul li ul li:first").mouseenter(function(){
    $("#navbar2 ul li ul li:first-child ul li").fadeIn(600); 
  });
  $("#navbar2 ul li ul li:first").mouseleave(function(){
    $("#navbar2 ul li ul li:first-child ul li").fadeOut(600);
  });
}); 
</script>

今すぐあなたのウェブページに置いてください。必要に応じて css の一部を編集できます。

于 2012-06-04T00:31:20.390 に答える