Question

我尝试使用我在互联网上找到的代码制作一个简单的CSS菜单，我希望它的文本用块或其他东西覆盖其他文本。

HTML，CSS：

ul#menu ul {
  padding: 0px;
}
ul#menu li {
  position: relative;
  list-style-type: none;
  float: left;
  width: 125px;
}
ul#menu li > ul {
  display: none;
  position: absolute
}
ul#menu li:hover > ul {
  display: block;
}

<ul id="menu">
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 2</a>
    <ul id="sub1">
      <li><a href="#">Item 2.1</a>
      </li>
      <li><a href="#">Item 2.2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href="#">Item 4</a>
  </li>
  <li><a href="#">Item 5</a>
  </li>
</ul>
<br>

Answer 1

您可以通过在菜单中添加z-index来解决此问题，无论如何都将其保持在内容之上。

＆＃13;

ul#menu ul {
  padding: 0px;
}
ul#menu li {
  position: relative;
  list-style-type: none;
  float: left;
  width: 125px;
}
ul#menu li > ul {
  display: none;
  position: absolute
}
ul#menu li:hover > ul {
  display: block;
  z-index: 5;
  background-color:gray;
}

＆＃13;

<ul id="menu">
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 2</a>
    <ul id="sub1">
      <li><a href="#">Item 2.1</a>
      </li>
      <li><a href="#">Item 2.2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href="#">Item 4</a>
  </li>
  <li><a href="#">Item 5</a>
  </li>
</ul>
<br>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie fermentum rhoncus. Vivamus consequat lacus non nulla scelerisque ultrices. Curabitur volutpat nisi vel libero aliquet, at eleifend dui tincidunt. Aenean tincidunt erat ipsum, ut porttitor ipsum sagittis commodo. Donec bibendum maximus quam, sed feugiat sapien efficitur eget. Aenean viverra ante dignissim nisi hendrerit interdum. Duis tristique turpis eget magna dapibus commodo. Cras elementum tempus fermentum. Proin ac est turpis. Praesent sollicitudin tellus quis nulla fermentum, ut varius sem tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed efficitur augue ac lorem vehicula tempor. Pellentesque fermentum vestibulum ex. Quisque a sollicitudin enim. Etiam sem ex, blandit et nibh aliquet, pellentesque tincidunt nibh. Nullam sollicitudin justo ut laoreet eleifend.

Phasellus ipsum leo, pharetra ut eleifend a, pretium nec elit. Nullam tristique laoreet mauris at feugiat. Curabitur maximus fringilla nisl in elementum. Vestibulum vitae diam eros. Sed blandit suscipit molestie. Maecenas pretium tortor sapien, nec volutpat orci placerat sed. Nullam dictum quam id eros interdum, euismod consectetur nisl condimentum. Maecenas ullamcorper sagittis metus non sodales. Fusce ullamcorper ante dolor, at malesuada dui convallis eu. Donec a interdum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vitae tellus id turpis commodo pharetra. Integer sodales justo id metus mattis volutpat.

Mauris luctus nunc quis purus accumsan, vel fermentum nulla tincidunt. Pellentesque vel nisl lacinia, consectetur ex eget, scelerisque dui. In lectus magna, mollis et interdum a, vestibulum id tellus. Morbi hendrerit massa justo. Nam ac lorem sit amet magna tincidunt vulputate nec sit amet metus. Mauris et orci sed justo feugiat ullamcorper quis non tellus. Vestibulum nec aliquet nisi, in dapibus ex. </p>

＆＃13;

Answer 2

您可以通过在代码中添加以下内容来解决此问题

ul#sub1 {background-color:#(insert hex code you want);z-index:5;}

见小提琴

将文本放在带有背景的文本上

2 个答案: