arielbeje arielbeje - 2 months ago 21
CSS Question

Putting text on text with a background

I tried to make a simple CSS menu using code that I found on the internet, and I want the text from it to overlay the other text with a block or something.

jsfiddle

I want it to look something like this

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

You can solve this by adding a z-index to your menu that will keep it above the content no matter what.

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;
}
<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>