Question

我想创建一个水平下拉菜单。但是，当我使用nav li:hover > ul成功隐藏子菜单后使用display:none来检索子菜单时，子菜单就完全消失了。当鼠标悬停在“收藏”按钮上时，如何再次显示子菜单？感谢您的帮助。

HTML：

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="Princess.css"> 
        <title> PPRINCESS </title> 
    </head>

    <body>

        <div id="wrap"> 
            <div id="title">
                <h1> PPRINCESS </h1>
            </div>
                <ul id="bar">
                    <li> <a href="home.html" > Home </a> </li>
                    <li> <a href="collection.html" > Collection </a> </li>
                            <ul>
                                <li>  <a href="angels.html"> Angel on Meadows </a> </li>
                                <li>  <a href="beach.html"> Beachy Ladies </a> </li>
                                <li>  <a href="streets.html"> Pavements and Streets </a> </li>
                                <li>  <a href="symbol.html"> Become a Symbol </a> </li>
                            </ul>
                    <li> <a href "shoes.html" > Shoes </a> </li>
                </ul>
        </div>

    </body> 

</html>

CSS：

body {
    background-color: #ffcda0;
}
#wrap {
    width: 1000px; 
    background-color: #ffff66;
}

#title {
    width:250px;
    padding:20px;
    float:left;
    display:inline-block;

    /* text-color: #525252;*/
}
#bar { 
    background-color: #fefbf7;
    width: 650px;  
    float: right;
    list-style:none; 
    padding: 20px;  
    display:inline-block ; 
}

#bar li {
    float:left;
    background-color: #fefbf7;
} 

#bar li a {
    display: block;
    padding: 20px;  
    font-weight: bold; 
    color: #4c4c4c;
} 
#bar li:hover {
    background-color:beige;
}
#bar li a,visited {
    color: moccasin;
    text-decoration: underline; 
}
#bar ul {
    display: none;
    position: absolute; 
}

#bar li:hover > ul li{
    display:block;
}

Answer 1

更正您的代码。但是，您需要应用更多的CSS来使第一个子菜单看起来很好。

body {
    background-color: #ffcda0;
}

#wrap {
    width: 1000px; 
    background-color: #ffff66;
}

#title {
    width:250px;
    padding:20px;
    float:left;
    display:inline-block;

    /* text-color: #525252;*/
}
#bar { 
    background-color: #fefbf7;
    width: 650px;  
    float: right;
    list-style:none; 
    padding: 20px;  
    display:inline-block ; 
}

#bar li {
    float:left;
    background-color: #fefbf7;
} 

#bar li a {
    display: block;
    padding: 20px;  
    font-weight: bold; 
    color: #4c4c4c;
} 
#bar li:hover {
    background-color:beige;
}
#bar li a,visited {
    color: moccasin;
    text-decoration: underline; 
}
#bar ul {
    display: none;
    position: absolute; 
}

#bar li:hover > ul{
    display:block;
}

        <div id="wrap"> 
            <div id="title">
                <h1> PPRINCESS </h1>
            </div>
                <ul id="bar">
                    <li> <a href="home.html" > Home </a> </li>
                    <li> <a href="collection.html" > Collection </a> 
                            <ul>
                                <li>  <a href="angels.html"> Angel on Meadows </a> </li>
                                <li>  <a href="beach.html"> Beachy Ladies </a> </li>
                                <li>  <a href="streets.html"> Pavements and Streets </a> </li>
                                <li>  <a href="symbol.html"> Become a Symbol </a> </li>
                            </ul>
                      </li>
                    <li> <a href "shoes.html" > Shoes </a> </li>
                </ul>
        </div>

此外，您可以查看此答案以获得更好的菜单 - How to make menu bar with nested submenu css

Answer 2

它运作良好，请尝试此代码。希望这能解决您的问题。

        <div id="wrap"> 
            <div id="title">
                <h1> PPRINCESS </h1>
            </div>
                <ul id="bar">
                    <li> <a href="home.html" > Home </a> </li>
                    <li> <a href="collection.html" > Collection </a> 
                            <ul>
                                <li>  <a href="angels.html"> Angel on Meadows </a> </li>
                                <li>  <a href="beach.html"> Beachy Ladies </a> </li>
                                <li>  <a href="streets.html"> Pavements and Streets </a> </li>
                                <li>  <a href="symbol.html"> Become a Symbol </a> </li>
                            </ul>
                    </li>
                    <li> <a href "shoes.html" > Shoes </a> </li>
                </ul>
        </div>

    </body> 

</html>

<style>
body {
    background-color: #ffcda0;
}
#wrap {
    width: 1000px; 
    background-color: #ffff66;
}

#title {
    width:250px;
    padding:20px;
    float:left;
    display:inline-block;

    /* text-color: #525252;*/
}
#bar { 
    background-color: #fefbf7;
    width: 650px;  
    float: right;
    list-style:none; 
    padding: 20px;  
    display:inline-block ; 
}

#bar li {
    float:left;
    background-color: #fefbf7;
} 

#bar li a {
    display: block;
    padding: 20px;  
    font-weight: bold; 
    color: #4c4c4c;
} 
#bar li:hover {
    background-color:beige;
}
#bar li a,visited {
    color: moccasin;
    text-decoration: underline; 
}
#bar ul {
    display: none;
    position: absolute; 
}

#bar li:hover  ul{
    display:block;
}
</style>

Answer 3

将css中的最后一行更改为

#bar li:hover > ul{
    display:block;
}

并移动<ul></ul>

中的子菜单<li></li>

然后它会起作用

未能在导航栏中收到隐藏的子菜单

3 个答案: