悬停下拉菜单上的CSS菜单

时间：2015-11-12 12:31:12

标签： html css css3

我试图在我的标题中制作简单的悬停下拉菜单，但它可以正常工作，除非在悬停时显示其他按钮，我无法找到原因

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

2 个答案:

答案 0 :(得分：1)

尝试制作ul浮动元素：

http://jsfiddle.net/b4wkhqLb/

＆＃13;
＆＃13; 
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;
}
＆＃13; 
        <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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以删除大量额外的HTML标记

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

相关问题
最新问题