簡單的子菜單導航不起作用？

Question

使用子菜單創建簡單的導航。 每當我將鼠標懸停在ul它都會顯示display: block ，否則子菜單始終display:none為display:none 。

目前：懸停功能不起作用。

這是我試圖顯示ul 。 我的選擇器錯了嗎？ 不確定。

    nav > li:hover > ul {
    display: block;
}

任何想法有什么問題嗎？ 我的CSS還是干凈的嗎？

完整的html

<!DOCTYPE html>
<html>
<head>
    <title>
        nav
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </div>
                <ul class="items">
                    <li><a href="#">items</a></li>
                    <li><a href="#">items</a></li>
                        <ul class="sub-items">
                            <li><a href="#">subs</a></li>
                            <li><a href="#">subs</a></li>
                            <li><a href="#">subs 3</a></li>
                        </ul>
                    <div class="items-after-sub-list">
                        <li><a href="#">items</a></li>
                        <li><a href="#">items</a></li>                  
                    </div>      

                </ul>           
        </nav>
    </header>

</body>
</html>

CSS

    html {
    font-size: 1.2rem;
}
* {
    padding: 0;
    margin: 0;

}


header {
    background-color: black;
    padding: 1rem;
    height: 20px;
}

.main-nav {
    display: flex;
}
.main-nav li {
    padding-right: 1rem;
}

.main-nav li a {
    text-decoration: none;
}

.items {
    list-style: none;
    position: relative;
    right: 15px;
 }
nav  {
    list-style: none;
 }

.items li {
        line-height: 2.5rem;

}
.items li a {
    font-size: 1rem;
    text-decoration: none;
    background-color: red;
    padding: 0.5rem;
}

.items-after-sub-list{
    position: relative;
    bottom: 143px;
}
.sub-items {
    position: relative;
    left: 72px;
    bottom: 48px;
    list-style: none;
 }

.sub-items  li a {
    color: black;
    background-color: green;

}
li a {
    transition: background 1s; 
}
nav a:hover {
    background-color: silver;
}

nav > li:hover > ul {
    display: block;
}

Answer 1

您的選擇器nav > li:hover > ul確實是錯誤的，原因有兩個：

首先，這是錯誤的，因為在<li>元素內沒有任何<ul> <li>元素。 您有一個子菜單，但是它是另一個<ul>元素的直接子菜單。
其次，這是錯誤的，因為它永遠不會等同於有效的標記。 <li>元素必須具有<ul> ， <ol>或<menu>父級。 使用<div>作為父項已過時。

除此之外，你的結構也是錯誤的。 “聯系人”位於div.main-nav ，因此如果沒有JavaScript，就無法訪問下拉列表（因為CSS 沒有父選擇器 ）。

我不建議使用JavaScript，而是通過稍微更改HTML結構來推薦一種純CSS解決方案。 每個“級別”都應作為HTML父級的子級包含。 在我的示例中，我已指出元素具有.more類的子級。

首先，您需要隱藏所有子菜單項 ，並同時顯示'root'元素（可以通過子選擇器>來實現）：

#collapse li {
  display: none;
}

#collapse > li {
  display: block;
}

然后，您可以使用以下命令顯示下一級子級：

#collapse li.more:hover > ul > li {
  display: block;
}

由於子選擇器的雙重使用，因此只能選擇下一個級別。 話雖如此，因為之間沒有孩子選擇#collapse和li.more ，它會打每 li.more元素#collapse ，允許無限遞歸。

在下面的最小示例中可以看到這一點：

 #collapse .more { list-style: none; cursor: pointer; text-indent: -1em; } #collapse .more:before { content: "+"; padding-right: 5px; } #collapse .more ul { text-indent: 0em; cursor: initial; } #collapse li { display: none; } #collapse > li { display: block; } #collapse li.more:hover > ul > li { display: block; }

 <ul id="collapse"> <li>Top-level without children</li> <li class="more">Top-level with children <ul> <li>Sub-level without children</li> <li class="more">Sub-level with children <ul> <li>Child 1</li> <li>Child 2</li> </ul> </li> </ul> </li> </ul>

將鼠標懸停在.more元素上會顯示直接的子代，並且僅顯示直接的子代。

希望這可以幫助！ :)

簡單的子菜單導航不起作用？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-09-08 02:41:11

簡單的子菜單導航不起作用？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-09-08 02:41:11

解決方案1
1 已采納 2017-09-08 02:41:11