CODEWITHSUNDEEP
htmlcssdrop-down-menu
Ally Baird
Ally Baird

Reputation: 17

Dropdown menu issue

Guys for the life of me I can't work out why the dropdown on 'option two' is not displaying properly, the list elements all seem to be sitting on top of each other and only shows the last option when hovering over, any ideas?

http://jsfiddle.net/38pbvpx1/

        body {
        margin: 0;
    }
    header {
        position: relative;
        width: 80%;
        height: 80px;
        padding: 0;
        margin: 0 auto;
        background: #ff6;
        max-width: 1200px;
    }
    /* nav and submenu */
    nav {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 80px;
        padding: 0;
        margin: 0;
    }
    nav ul {
        padding: 0;
        margin: 0;  
    }
    nav li {
        display: inline-block;
        zoom: 1;
        *display: inline;
        _height: 80px;
        list-style-type: none;
    }
    nav li a {
        display: block;
        height: 80px;
    }
    nav li a:hover {
        background: #448f69;
    }
        /* submenu navigation
        ---------------------------------------- */
        ul#menu, ul#menu ul.sub-menu {
            padding:0;
            margin: 0;
        }
        ul#menu li, ul#menu ul.sub-menu li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        ul#menu li {
            width: auto;
        }
        ul#menu li a, ul#menu li ul.sub-menu li a {
            width: auto;
            text-decoration: none;
            color: #000;
            padding: 0 15px;
            display: block;
            font-size: 16px;
        }
        ul#menu li {
            position: relative;
        }
        ul#menu li ul.sub-menu {
            display:none;
            postion: absolute;
            top: 80px;
            left: 0;
            width: auto;
        }
        ul#menu li:hover ul.sub-menu {
            display:block;
        }
        ul#menu li:hover ul.sub-menu li {
            position: absolute;
            display:block;
            width: 100%;
            background-color: #red;
        }
        ul#menu li:hover ul.sub-menu li a:hover {
            display:block;
            width: auto;
            color: #000;
            background-color: green;
        }
<body>
<header>
<nav>
  <ul id="menu">
    <li><a href="">Option One</a></li>
    <li><a href="">Option Two</a>
        <ul class="sub-menu">
            <li><a href="">Section A</a></li>
        <li><a href="">Section B</a></li>
        <li><a href="">Section C</a></li>
      </ul><!-- /.sub-menu -->
    </li>
    <li><a href="">Option Three</a></li>
    <li><a href="">Option Four</a></li>
  </ul><!-- /#menu -->
</nav>

Upvotes: 0

Views: 103

Answers (2)

Alex Char
Alex Char

Reputation: 33218

Make the following changes:

        ul#menu li:hover ul.sub-menu li {
            position: relative;/*Change position from absolute to relative*/
            display:block;
            width: 100%;
            background-color: #red;
        }

        ul#menu li:hover ul.sub-menu li {
            position: relative;
            display:block;
            width: 100%;
            /*top: 80px;Remove this*/
            background-color: #red;
        }

fiddle

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114990

At a basic level it's because you have positioned all of the sbnmenu's li abolsutely so they are sitting on top of each other.

The positioning being used here is quite odd so I've updated it slightly.

JSfiddle

CSS

body {
    margin: 0;
}
header {
    position: relative;
    width: 80%;
    height: 80px;
    padding: 0;
    margin: 0 auto;
    background: #ff6;
    max-width: 1200px;
}


}
nav ul {
    padding: 0;
    margin: 0;
}
nav li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    _height: 80px;
    list-style-type: none;
    position: relative;
    vertical-align: top;
}
nav li a {
    display: block;
    height: 80px;
}
nav li a:hover {
    background: #448f69;
}
/* submenu navigation
    ---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, 
ul#menu ul.sub-menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#menu li {
    width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
    width: auto;
    text-decoration: none;
    color: #000;
    padding: 0 15px;
    display: block;
    font-size: 16px;
}
ul#menu li {
    position: relative;
}
ul#menu li ul.sub-menu {
    display:none;
    postion: absolute;
    top:100%;
    left: 0;
    width: auto;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
ul#menu li:hover ul.sub-menu li {
    //position: absolute;
    display:block;
    width: 100%;
    background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
    display:block;
    width: auto;
    color: #000;
    background-color: green;
}

Upvotes: 3

Related Questions