-1

前もって感謝します。私は実際にこれを機能させるためにいくつかのJavaScriptスクリプトを試しましたが、どれもうまくいきませんでしたが、JavaScriptの私の理解はかなり初歩的です.

リンク自体のコードを調整できません - 生成中です。ただし、ID とクラスで生成されます。ユーザーがリンクをロールオーバーすると、非表示の ul (または div) が表示されるように、リンクの ID を参照するスクリプトをドキュメントに作成したいと考えています。実際のリンク。一般的にCSSを変更することしかできません。

これを行うことができるJavaScriptはありますか？私はクエリを行うことができます..

ありがとうございました！

bb

4

1 に答える 1

0

ここでは、HTML と CSS のみを使用してドロップダウン メニューを作成しました。これは、メニュー リンクのホバー状態で表示/非表示を切り替えます。

HTML:

<div id="menu1" class="menu">
  <a href="#" id="link1">
    Menu-1
  </a>
  <div id="menulist1" class="menulist">
    <div>
      Option1
    </div>
    <div>
      Option2
    </div>
    <div>
      Option3
    </div>
    <div>
      Option4
    </div>
    <div>
      Option5
    </div>
  </div>
</div>
<div id="menu2" class="menu">
  <a href="#" id="link2">
    Menu-2
  </a>
  <ul id="menulist2" class="menulist">
    <li>
      Option1
    </li>
    <li>
      Option2
    </li>
    <li>
      Option3
    </li>
    <li>
      Option4
    </li>
    <li>
      Option5
    </li>
  </ul>
</div>

CSS:

.menu{
  font-size:15px;
  display:inline-block;
  margin:0px;
  padding:0px;
}
.menu a{
  display:block;
  width:120px;
  text-align:center;
  background-color:#2211ce;
  color:#dccb00;
  text-decoration:none;
}
#menulist1{
  position:absolute;
  top:33px;
  border:1px solid #113399;
  background-color:#88a5ff;
  display:none;
}
#menulist2{
  position:absolute;
  top:20px;
  border:1px solid #113399;
  background-color:#88a5ff;
  display:none;
}
#menu1:hover #menulist1{
  display:block;
}

#menu2:hover #menulist2{
  margin-top:13px;
  display:block;
}

.menulist div{
  margin-left:0px;
  padding:3px;
  width:112px;
}
.menulist li{
  list-style:none;
  width:72px;
  padding:3px;
  margin-left:0px;
  display:block;
}

.menulist div:hover,.menulist li:hover{
  background-color:#1155ac;
  color:#dccb00;
}

上記の例のビンも作成しました。 http://codebins.com/codes/home/4ldqpboをクリックしてください。

于 2012-07-04T13:22:45.053 に答える