Question

如何使用<li>设置id="mathi"元素的样式，以便我可以使用三个元素设置菜单样式？

我想在父菜单和子菜单中给每个人一个单独的背景。

<ul id="MyMenu">
  <li id="mathi">info 1
    <ul class="inner">
       <li>apple1</li>
       <li>mango1</li>
       <li>banana1</li>
    </ul>
  </li >
  <li id="mathi">info 2
    <ul class="inner">
       <li>apple2</li>
       <li>mango2</li>
       <li>banana2</li>
    </ul>
  </li>
  <li id="mathi">info 3
    <ul class="inner">
       <li>apple3</li>
       <li>mango3</li>
       <li>banana3</li>
    </ul>
  </li>
</ul>

Answer 1

您不能拥有多个具有相同ID的元素。如果您需要每个列表具有相似的格式而略有差异，那么您可以为每个元素应用一个类。

<ul id="MyMenu">
  <li id="math1" class="math">info 1
    <ul class="inner">
       <li>apple1</li>
       <li>mango1</li>
       <li>banana1</li>
    </ul>
  </li >
  <li id="math2" class="math">info 2
    <ul class="inner">
       <li>apple2</li>
       <li>mango2</li>
       <li>banana2</li>
    </ul>
  </li>
  <li id="math3" class="math">info 3
    <ul class="inner">
       <li>apple3</li>
       <li>mango3</li>
       <li>banana3</li>
    </ul>
  </li>
</ul>

然后是CSS：

.math{
    /* common formatting */
}
#math1{
    background-color: ...;
}
#math2{
    background-color: ...;
}
#math3{
    background-color: ...;
}

请帮我设置这个垂直菜单的样式

1 个答案: