CODEWITHSUNDEEP
htmlcssdrop-down-menu
AngelicCore
AngelicCore

Reputation: 1453

Dropdown list using css not behaving properly (Gaps between items)

I was just playing with an example and got stuck on something. I am wondering what could be creating the gap you see in the following screenshot, been trying different things but I guess I need some help.

Gap

The code is as follows:

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="menuhovercss.css">
            <base target="main" />
            <title>
                home
            </title>
        </head>
        <body>
            <div>
                <ul>
                    <li><a href="">Home</a> </li>
                    <li><a href="#">Tracks</a>
                        <ul>
                            <li><a href="">SD</a>
                                <ul>
                                    <li><a href="">Schedule</a></li>
                                    <li><a href="">Materials</a></li>
                                    <li><a href="">Contacts</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="">GIS</a>
                                <ul>
                                    <li><a href="">Schedule</a></li>
                                    <li><a href="">Materials</a></li>
                                    <li><a href="">Contacts</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="">UI</a>
                                <ul>
                                    <li><a href="">Schedule</a></li>
                                    <li><a href="">Materials</a></li>
                                    <li><a href="">Contacts</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="">Web of the week</a> </li>
                </ul>
            </div>
        </body>
    </html>

CSS

ul {
    padding: 0; /*Remove Indentation*/
    list-style: none; /*Remove leading bullet*/
    /*position:relative;
    display:block;*/
}  

ul li {
    float: left; /*Force it to one line*/
    width: 130px; /*Set each menu item to specific width*/
    text-align: center; /*centers each inside its own 'cell'*/
    /*display:list-item;*/
    /*border-bottom: 5px solid #2ecc71;*/
}

ul li a {
    display: block;
    padding: 5px 10px; /* Create Padding for each link*/
    color: #333;
    background-color: #f2f2f2;
    text-decoration: none;
    border-bottom: 4px solid green;
}

ul li a:hover { /* Change color when hovering */
    color: #fff;
    background-color: #939393;
}

ul ul {
    display: none; /*Hide the submenus*/
}

ul li:hover > ul {
    display: list-item; /*Show the submenus when hovering > means direct child*/
    /*float: left;*/
}

ul ul > li { /*Submenu*/
    float: left;
    position: relative;
    border-bottom: none;
}

ul ul ul li { /*Sub-submenu*/
    position: absolute relative;
    top: -25px;
    left: 130px;
}

Upvotes: 0

Views: 77

Answers (1)

thetont
thetont

Reputation: 810

the 3rd level menu is positioned inside the <li> of the 2nd level menu giving height to the parent element.

simply add this rule to avoid this effect

ul ul ul{position:absolute;}

Upvotes: 1

Related Questions