0

これらの 4 つのリストから 1 つのドロップダウン メニューを作成しようとしています。

<ul id="list-nav">
<li><a href="#">1</a></li>
<ul>
<li><a href="#"></a>1</li>
<li><a href="#"<></a>2</li>
<li><a href="#"<></a>3</li> 
<li><a href="#"<></a>4</li>
<li><a href="#"<></a>5</li>
</ul>


<ul id="list-nav">  
<li><a href="#">2</a></li>
<ul>
<li><a href="#"<></a>1</li>
<li><a href="#"<></a>2</li>
<li><a href="#"<></a>3</li>
<li><a href="#"<></a>4</li>
<li><a href="#"<></a>5</li>


<ul id="list-nav">  
<li><a href="#">3</a></li>
<ul>
<li><a href="#"<></a>1</li>
<li><a href="#"<></a>2</li>
<li><a href="#"<></a>3</li>
<li><a href="#"<></a>4</li>
<li><a href="#"<></a>5</li>


<ul id="list-nav">  
<li><a href="#">4</a></li>
<ul>
<li><a href="#"<></a>1</li>
<li><a href="#"<></a>2</li>
<li><a href="#"<></a>3</li>
<li><a href="#"<></a>4</li>
<li><a href="#"<></a>5</li>
</ul>

しかし、なんらかの理由で CSS がまとまりません。コーディングに時間がかかりすぎていると思うので、CSS を見せてくれる人が必要です。メニューをインラインにして、マウスクリックで各下位カテゴリをドロップダウンしたい。

4

3 に答える 3

0

マークアップにいくつかの重大なエラーがあります:

  • 同じ ID が複数回使用されています。ページ内で同じ ID 名を使用するのは 1 回だけにしてください。
  • a タグの形式が正しくありません。
  • ドロップダウン ul タグは、親 ul の li タグ内にネストされていません。
  • ドロップダウン項目の数はおそらく a タグ内にあるはずです

マークアップの修正は以下のとおりです。

<ul id="list-nav-1">
  <li><a href="#">1</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
</ul>
<ul id="list-nav-2">
  <li><a href="#">2</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
</ul>
<ul id="list-nav-3">
  <li><a href="#">3</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
</ul>
<ul id="list-nav-4">
  <li><a href="#">4</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
</ul>

ドロップダウンの動作で何を達成しようとしているのかに関しては、あなたが何を望んでいるのかわかりません。最終結果がどのように見えるかの視覚的なモックアップを提供していただけますか?

于 2012-05-31T21:02:10.920 に答える
0

ul タグを閉じていません。最初と最後のものを除いて。そして、4 か所で id:s を使用しています。Id:s. Id はページごとに 1 回だけ使用する必要があります。代わりにクラスを使用してください。

于 2012-05-31T19:31:58.763 に答える
0

aタグを修正することから始めるべきだと思います

<li><a href="#">1</a></li>

それ以外の

<li><a href="#"<></a>1</li>

番号が a タグ内にあることを確認し、すべての ul タグを閉じていることも確認してください。

対話性に関しては、CSS3 または JavaScript を使用する必要がある場合があります。

これを行うためのチュートリアルがたくさんあります。

jQuery は簡単な方法かもしれません。

幸運を

于 2012-05-31T19:36:23.233 に答える