w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
drop down menu: drop down lists horizontal underneath main menu

You need to declare #menu with position:relative, and remove that from li. This way second ul will expand to the width of #menu. Second, you need to make ul ul li { display: inline-block; } and last ul ul { width: 100%; left: 0 }

#menu li ul li {display: inline-block;}
#menu {
    display: inline-block;
    min-width: 600px;
    list-style:none;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}
#menu > li:hover > ul {
    border: 1px solid #FF0000;
    display: block;
    left: 0;
    width: 100%;
}

Here is a link of a working example - Click here





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.