Question

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

<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。我希望菜单内联，鼠标点击我想让每个undercategory下拉。

Answer 1

您尚未关闭ul标记。除了第一个和最后一个。你在四个地方使用id：s。编号：s。我应该每页只使用一次ID。改为使用类。

Answer 2

我认为你应该先修正一个标签

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

而不是

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

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

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

有很多教程可以解决这个问题。

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

祝你好运

Answer 3

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

多次使用相同的ID。您应该只使用相同的ID 在页面中命名一次。
a标签格式不正确。
下拉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>

关于你想要通过下拉行为实现的目标，我不确定你想要什么。你能提供一个关于最终结果应该是什么样子的视觉模型吗？

菜单有一个组合背景

3 个答案: