CODEWITHSUNDEEP
htmlcsshtml-listsmenubar
user2093100
user2093100

Reputation: 1

Overlapping of li element's text when nested

I am trying to create a menu bar with CSS/HTML which on hover would trigger in the list elements. I am having an issue when I am trying to arrange the list in two columns.

Here is the sample code:http://jsfiddle.net/Km922/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
        .navigation ul
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
            left: 300px;
            position: relative;
            top: 200px;
        }
        .navigation ul li ul .second
        {
            float: right;
            width: 200px;
            position: relative;
            overflow: hidden;
        }
        .navigation li
        {
            float: left;
            height: 30px;
            margin-left: 15px;
            margin-right: 15px;
            position: relative;
            top: 30px; /*clear:left;*/
        }
        .navigation li a
        {
            text-decoration: none;
        }
        .navigation li a:hover
        {
            text-decoration: underline;
        }
        .navigation li ul
        {
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: -9999px;
            height: 30px;
            top: 30px; /*display:inline-block;*/
        }
        .navigation li:hover ul
        {
            left: 0;
            width: 160px;
            visibility: visible;
        }
        .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;
        }
        .navigation ul li ul .first
        {
            float: left;
            width: 200px;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body background="Images/global-splash-map.jpg">
    <header class="header-container">
  <div id="apDiv1"><img src="Images/levis-logo.png" /></div>
</header>
    <div class="navigation">
        <ul>
            <li><a href="#">menu1</a>
                <ul>
                    <li class="second">Canada</li>
                    <li class="first">United States</li>
                    <li class="second">Mexico</li>
                </ul>
            </li>
            <li><a href="#">menu2</a>
                <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>
            </li>
            <li><a href="#">menu3</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
            <li><a href="#">menu3</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
            <li><a href="#">menu4</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

When you hover on menu1 , it displays perfectly but when you hover on menu2, I see the list elements which are supposed to appear in each single line are appearing and overlapping with each other. Can anyone help me in fixing this issue?

Upvotes: 0

Views: 3317

Answers (3)

curious_skeleton
curious_skeleton

Reputation: 41

For elements that will change position, like dropdown list items. It's probably better to change list items from absolute to relative positioning.

position: relative;

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

As already noted, you cannot use float and absolute positioning together on the same element. That's ok, because we don't want either one. The secret to getting perfect columns is to use the CSS columns module.

I've done a considerable amount of cleanup here in your CSS:

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

.navigation ul {
    margin: 0px;
    padding: 0px;
    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: 0px;
    padding: 0px;
    position: absolute;
    top: 30px;
    display: none;
}
.navigation li:hover ul {
    left: 0;
    width: 160px;
    display: block;
    columns: 2; /* this here is the key */
}
.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

Upvotes: 0

isherwood
isherwood

Reputation: 61063

You have several problems. First, floats and absolute positioning aren't compatible:

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

Next, you can't stack list items like this and have them split into two columns. That's not how floats work. 

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

Multi-column lists without specific HTML is a challenge. Here's an article that might get you started: http://alistapart.com/article/multicolumnlists

Upvotes: 1

Related Questions