0

我正在尝试从这四个列表中创建一个下拉菜单

<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

我认为您应该从更正 a 标签开始

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

代替

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

确保数字在 a 标签内，并确保关闭所有 ul 标签。

至于交互性，您可能需要使用一些 CSS3 或 JavaScript。

有很多教程可以做到这一点。

jQuery 可能是一个简单的方法。

祝你好运

于 2012-05-31T19:36:23.233 回答
0

您还没有关闭 ul 标签。除了第一个和最后一个。你在四个地方使用 id:s。编号：s。每页应该只使用一次 ID。改用类。

于 2012-05-31T19:31:58.763 回答
0

您的标记存在一些严重错误：

  • 同一个 id 被多次使用。您应该在一个页面中只使用一次相同的 id 名称。
  • 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 回答