Text overlaps when li element is nested inside another element

Question

Text overlaps when li element is nested inside another element

Seeking assistance in creating a CSS/HTML menu bar that triggers list elements on hover. Facing difficulty arranging the list in two columns.

Code Sample:http://jsfiddle.net/Km922/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
        // CSS code here
    </style>
</head>
<body background="Images/global-splash-map.jpg">
    // HTML code here
</body>
</html>

When hovering over "menu1," it displays correctly, but when hovering over "menu2," the list elements overlap instead of appearing in a single line. Looking for help to resolve this issue.

html css html-lists menubar

Answer 1

Answer №1

You are facing a few issues. Firstly, floats and absolute positioning do not work well together:

.navigation ul li ul .first {
    float: left;
    position: absolute;
}

Additionally, stacking list items like you have done and trying to split them into two columns using floats is not the correct approach.

<ul>
  <li class="second">Argentina</li>
  <li class="second">Brazil</li>
  <li class="second">Bolivia</li>
  <li class="second">Chile</li>
  <li class="second">Colombia</li>
  <li class="second">Ecuador</li>
  <li class="first">Panama</li>
  <li class="first">Paraguay</li>
  <li class="first">Peru</li>
  <li class="first">Uruguay</li>
  <li class="first">Venezuela</li>
</ul>

Creating multi-column lists without specific HTML can be tricky. You may find this article helpful to start with:

Answer 2

You are facing a few issues. Firstly, floats and absolute positioning do not work well together:

.navigation ul li ul .first {
    float: left;
    position: absolute;
}

Additionally, stacking list items like you have done and trying to split them into two columns using floats is not the correct approach.

<ul>
  <li class="second">Argentina</li>
  <li class="second">Brazil</li>
  <li class="second">Bolivia</li>
  <li class="second">Chile</li>
  <li class="second">Colombia</li>
  <li class="second">Ecuador</li>
  <li class="first">Panama</li>
  <li class="first">Paraguay</li>
  <li class="first">Peru</li>
  <li class="first">Uruguay</li>
  <li class="first">Venezuela</li>
</ul>

Creating multi-column lists without specific HTML can be tricky. You may find this article helpful to start with:

Answer 3

Answer №2

It is important to note that using float and absolute positioning together on the same element is not recommended. Instead of relying on these methods, you can achieve perfect columns by implementing the CSS columns module.

I have made significant improvements to your CSS code:

http://jsfiddle.net/uPzxb/4/ (prefixes not included)

.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    left: 30px;
    position: relative;
    top: 20px;
}
.navigation > ul > li {
    float: left;
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
}
.navigation li a {
   text-decoration: none;
}
.navigation li a:hover {
   text-decoration: underline;
}
.navigation li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
    display: none;
}
.navigation li:hover ul {
    left: 0;
    width: 160px;
    display: block;
    columns: 2; /* utilize this for column layout */
}
.header-container {
    background: url(Images/nav-bg4.png) repeat-x scroll 0 0 transparent;
    height: 136px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 901;

}
#apDiv1 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 902;
    top: 29px;
}

http://caniuse.com/#feat=multicolumn

Answer 4

It is important to note that using float and absolute positioning together on the same element is not recommended. Instead of relying on these methods, you can achieve perfect columns by implementing the CSS columns module.

I have made significant improvements to your CSS code:

http://jsfiddle.net/uPzxb/4/ (prefixes not included)

.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    left: 30px;
    position: relative;
    top: 20px;
}
.navigation > ul > li {
    float: left;
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
}
.navigation li a {
   text-decoration: none;
}
.navigation li a:hover {
   text-decoration: underline;
}
.navigation li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
    display: none;
}
.navigation li:hover ul {
    left: 0;
    width: 160px;
    display: block;
    columns: 2; /* utilize this for column layout */
}
.header-container {
    background: url(Images/nav-bg4.png) repeat-x scroll 0 0 transparent;
    height: 136px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 901;

}
#apDiv1 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 902;
    top: 29px;
}

http://caniuse.com/#feat=multicolumn

Answer 5

Answer №3

When dealing with elements that may shift position, such as dropdown list items, it is advisable to switch their positioning from absolute to relative.

position: relative;

Answer 6

When dealing with elements that may shift position, such as dropdown list items, it is advisable to switch their positioning from absolute to relative.

position: relative;

Text overlaps when li element is nested inside another element

Answer №1

Answer №2

Answer №3

Similar questions

CSS code for a fixed fullscreen menu with scrolling

Looking for assistance in streamlining the code

I'm encountering difficulties utilizing ternary operators in TypeScript

Exploring methods to iterate through an extracted div using Selenium in Python

swapping out an external CSS file in React for a new CSS file

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

Centering items in Bootstrap 4, while excluding the first element

Balancing heights with jQuery

Troubleshooting overflow problems when centering a UL menu with an unspecified width

unusual problem with referencing jQuery mobile pages and implementing click functionality

Experiencing an inexplicable blurring effect on the modal window

CSS: Implementing opacity on background images within an unordered list menu items

What is the best way to create grid designs using less in bootstrap?

Retrieving the value of a formControl within a formArray is made possible through a reactive form in

Locate a specific element by utilizing xpath

What are the steps for integrating a date and time picker bootstrap plugin?

When JSF renders bootstrap buttons, they appear without any horizontal padding

Make sure that the iframe loads the next page with enough force to break out

Previewing a PDF file with multiple headers displayed above the text content

Incorporating external files into Javascript code may cause issues with its functionality