Question

尝试了一个包含3个项目的小菜单。（“设置”，“隐私”，“关于”）

当点击“设置”链接时，我创建了一个菜单，它出现但立即消失。代码中的错误是什么？我是CSS的新手。非常感谢帮助/替代想法来解决这个问题。谢谢提前。

我的代码：

*{
                margin:0px;
                padding:0px;
            }
            
           
            #settings li {
                list-style: none;
                background-color: black;
                float: left;
                padding: 2px;
                color: white;
                font-size: 18px;
                width:180px;border:1px solid yellow;
                height:50px;
                line-height:20px;
                
            }
    
            #settings ul li:active {
              
                background-color: yellow;
                
            }
            
            #settings ul ul{
                display:none;
            }
            
            #settings ul  li:active > ul {
                display:block;
            }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

    </head>
    
    <body>
    
    
        <div id="settings">
            <ul>
                <li><a href="#">settings</a>
                    <ul>
                        <li>menu1</li>
                        <li>menu2</li>
                        <li>menu3</li>
                    </ul>
                </li>
                <li>privacy</li>
                <li>About</li>
            </ul>
        </div>
    
    
    </body>
    
    </html>

Answer 1

试试这个

*{
                margin:0px;
                padding:0px;
            }
            
           
            #settings li {
                list-style: none;
                background-color: black;
                float: left;
                padding: 2px;
                color: white;
                font-size: 18px;
                width:180px;border:1px solid yellow;
                height:50px;
                line-height:20px;
                
            }
    
            #settings ul li:hover {
          
            background-color: yellow;
            
        }
            
            #settings ul>li:hover ul{
                display: block;
            }
            #settings ul>li ul{
                display:none;
            }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

    </head>
    
    <body>
    
    
        <div id="settings">
            <ul>
                <li><a href="#">settings</a>
                    <ul>
                        <li>menu1</li>
                        <li>menu2</li>
                        <li>menu3</li>
                    </ul>
                </li>
                <li>privacy</li>
                <li>About</li>
            </ul>
        </div>
    
    
    </body>
    
    </html>

Answer 2

＆＃34;有源＆＃34;当你点击元素时，状态就会消失，但是当你抬起手指时，它会像笨蛋一样消失。

使用：改为悬停，它会工作;）

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

https://jsfiddle.net/hkLev6k8/

编辑：同样的事情，只有审美变化，因为我无法忍受默认链接的外观：p https://jsfiddle.net/hkLev6k8/5/

请确认您是否可以悬停下拉菜单而不关闭它。我很感兴趣，因为它在所有浏览器中为我工作，甚至到IE，但我觉得它不应该。

单击“设置”链接时菜单消失 - CSS

2 个答案: