CSS menu on hover dropdown

Question

I'm trying to make simple hover drop down menu in my header it works fine except on hover it shows additional buttons and i can't find the reason for that

Jsfiddle : http://jsfiddle.net/gpf5n/#&togetherjs=EleDQDiDLG

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hotel</title>
        <link rel="stylesheet" type="text/css" href="Hotel.css">            
        <script src="HotelM.js"></script>
    </head>
    <body>
        <main>
            <header>
                <div></div>
                <nav>   

                    <ul class="Menu1">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                </nav>
            </header>
        </main>
    </body>
</html>

CSS:

body , div ,h1, h2, section,canvas, main, footer , header , p , a, article, ul ,li, ol, table {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 
main{
    width: 1000px;
    height: auto;
    margin: 0 auto;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ab0ed+0,9fd8ef+27,9fd8ef+27,bfe8f9+52,9fd8ef+79,2ab0ed+100 */
background: rgb(42,176,237); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(42,176,237,1) 0%, rgba(159,216,239,1) 27%, rgba(159,216,239,1) 27%, rgba(191,232,249,1) 52%, rgba(159,216,239,1) 79%, rgba(42,176,237,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab0ed', endColorstr='#2ab0ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
header{
    width: 100%;
    height: 100px;
    background-color: #7142AA;
}
header div{
    height: 50%;
    width: 100%;    
}
header nav{
    height: 50%;
    width: 100%;    
    padding-left: 0.5%;
}
header nav ul{
    list-style-type: none;
}

nav ul{
    display: inline-block;
    width: 15%; 
    height: 100%;
}
nav li{
    height: 100%;
}
nav a{
    font-size: 1.7em;
    text-decoration: none;
    background-color: #6025A8;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
    display: none;
}
.MenuButtons{
    font-size: 1.7em;
    text-decoration: none;
    background-color: #6025A8;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    display: block; 
}
.Menu1:hover a{
    display: block;
}

I clicked through to your fiddle and became immediately uncomfortable with the extra nav and floating icons all over my screen. — Jay
– Jay, Commented Nov 12, 2015 at 12:36
"shows additional buttons" You mean action 1 and 2 ? Or the bullets ? — Velko Georgiev
– Velko Georgiev, Commented Nov 12, 2015 at 12:39
i mean it should display block 4 addition butons instead it shows them but it shows additonal linear buttons which are not even in the "ul" — Georgi Antonov
– Georgi Antonov, Commented Nov 12, 2015 at 12:40

Velko Georgiev · Accepted Answer · 2015-11-12 12:48:50Z

Try making the ul floating elements:

http://jsfiddle.net/b4wkhqLb/

body , div ,h1, h2, section,canvas, main, footer , header , p , a, article, ul ,li, ol, table {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 
main{
    width: 1000px;
    height: auto;
    margin: 0 auto;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ab0ed+0,9fd8ef+27,9fd8ef+27,bfe8f9+52,9fd8ef+79,2ab0ed+100 */
background: rgb(42,176,237); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(42,176,237,1) 0%, rgba(159,216,239,1) 27%, rgba(159,216,239,1) 27%, rgba(191,232,249,1) 52%, rgba(159,216,239,1) 79%, rgba(42,176,237,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab0ed', endColorstr='#2ab0ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
header{
    width: 100%;
    height: 100px;
    background-color: #7142AA;
}
header div{
    height: 50%;
    width: 100%;    
}
header nav{
    height: 50%;
    width: 100%;    
    padding-left: 0.5%;
}
header nav ul{
    list-style-type: none;
}

nav ul{
    display: inline-block;
    width: 15%; 
    height: 100%;
    float: left;
}
nav li{
    height: 100%;
}
nav a{
    font-size: 1.7em;
    text-decoration: none;
    background-color: #6025A8;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
    display: none;
}
.MenuButtons{
    font-size: 1.7em;
    text-decoration: none;
    background-color: #6025A8;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    float: left;
}
.Menu1:hover a{
    display: block;
}

        <main>
            <header>
                <div></div>
                <nav>   

                    <ul class="Menu1">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD1</a></li>
                        <li><a href="#">ASD2</a></li>
                        <li><a href="#">ASD3</a></li>
                        <li><a href="#">ASD4</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                        <li><a href="#">ASD</a></li>
                    </ul>
                </nav>
            </header>
        </main>

Thanks! but what was the purpose of it why additonal elements were shown
Those weren't additional element.. They were the rest on the main menus. When you put the mouse over the menu and the sub menus were displayed the main div was expanded . So all child div went to the bottom
but the rest of the main menus are more than 4 and my code was showing additioanl 4
You have 5 menus. When you hover 1 the sub menus were expanding the parent element, showing the 4 sub menus, and sending the 4 main menus to the bottom. so it total you had 1 main menu at the top 4 verticals and 4 at the bottom ( at the bottom 4 mains + 1 vertical )

Luís P. A. · Accepted Answer · 2015-11-12 12:55:57Z

You can remove a lot off extra HTML Markup

CSS

nav ul {
    position: relative;
    display: block;
    top: 40px;
}
nav ul li {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}
nav ul li ul li {
    display: block;
    position: relative;
}
nav ul li ul {
    display: none;
    position: absolute;
    top:100%;
    background:#7142AA;
}
nav ul li:hover ul {
    display: block;
}
body, div, h1, h2, section, canvas, main, footer, header, p, a, article, ul, li, ol, table {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main {
    width: 1000px;
    height: auto;
    margin: 0 auto;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ab0ed+0,9fd8ef+27,9fd8ef+27,bfe8f9+52,9fd8ef+79,2ab0ed+100 */
    background: rgb(42, 176, 237);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(42, 176, 237, 1) 0%, rgba(159, 216, 239, 1) 27%, rgba(159, 216, 239, 1) 27%, rgba(191, 232, 249, 1) 52%, rgba(159, 216, 239, 1) 79%, rgba(42, 176, 237, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(42, 176, 237, 1) 0%, rgba(159, 216, 239, 1) 27%, rgba(159, 216, 239, 1) 27%, rgba(191, 232, 249, 1) 52%, rgba(159, 216, 239, 1) 79%, rgba(42, 176, 237, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(42, 176, 237, 1) 0%, rgba(159, 216, 239, 1) 27%, rgba(159, 216, 239, 1) 27%, rgba(191, 232, 249, 1) 52%, rgba(159, 216, 239, 1) 79%, rgba(42, 176, 237, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ab0ed', endColorstr='#2ab0ed', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}
header {
    width: 100%;
    height: 100px;
    background-color: #7142AA;
}
header div {
    height: 50%;
    width: 100%;
}
header nav {
    height: 50%;
    width: 100%;
    padding-left: 0.5%;
}
header nav ul {
    list-style-type: none;
}
nav a {
    font-size: 1.7em;
    text-decoration: none;
    color: #fff;
    display: block;
    text-align: center;
}

HTML

<main>
    <header>
        <nav>
            <ul class="Menu1">
                <li><a href="#">ASD1</a>

                    <ul>
                        <li><a href="#">1</a>

                        </li>
                        <li><a href="#">2</a>

                        </li>
                        <li><a href="#">3</a>

                        </li>
                    </ul>
                </li>
                <li><a class="MenuButtons" href="#">ASD</a>

                    <ul>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                    </ul>
                </li>
                <li><a class="MenuButtons" href="#">ASD</a>

                </li>
                <li><a href="#">ASD</a>

                    <ul>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                    </ul>
                </li>
                <li><a class="MenuButtons" href="#">ASD</a>

                </li>
                <li><a href="#">ASD</a>

                    <ul>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                    </ul>
                </li>
                <li><a class="MenuButtons" href="#">ASD</a>

                    <ul>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                        <li><a href="#">ASD</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
</main>

DEMO HERE

Collectives™ on Stack Overflow

CSS menu on hover dropdown

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related