自定义 CSS 导航菜单，无下拉菜单

Question

所以我有一个自定义的naviation菜单，我正在尝试制作，但我似乎无法让它工作。我已经包含了我的代码和我的css代码。我有 3 个子菜单，将鼠标悬停在父菜单上时，它们应该显示，但它们没有。

有什么想法吗？

网页代码：

<div class="menu">
    <div class="menu-padder">
    <a href="">Item 1</a>
    <a href="">Item 2</a>
    <li class="submenu">
    <a href="">Subitem 1</a>
    <a href="">Subitem 2</a>
    </li>
    <a href="">Item 3</a>
    <li class="submenu">
    <a href="">Subitem 1</a>
    <a href="">Subitem 2</a>
    </li>
    <a href="">Item 4</a>
    <li class="submenu">
    <a href="">Subitem 1</a>
    <a href="">Subitem 2</a>
    </li>   
    <a href="">Item 5</a>
    </div>
    </div>

CSS代码：

.menu {
    background-image: url('img/menu.jpg');
    width: 1000px;
}
.menu-padder {
    padding:5px;
}
.menu a {
    padding:5px;
    color:white;
    text-decoration:none;
    font-weight:bold;
}
.menu a:hover {
    padding:5px;
    color:yellow;
    text-decoration:none;
}
.submenu {
    display:none;
    padding:0px;
}
a:hover .submenu {
    display:block;
}

Answer 1

这不是

创建菜单的正确方法，您需要更改HTML和CSS中的一些更改：

演示

<div class="menu">
    <div class="menu-padder">
        <ul>
            <li><a href="">Item 1</a></li>
            <li>
                <a href="">Item 2</a>
                <ul class="submenu">
                    <li><<a href="">Subitem 1</a></li>
                    <li><<a href="">Subitem 2</a></li>
                </ul>
            </li>
            <li>
                <a href="">Item 3</a>
                <ul class="submenu">
                    <li><<a href="">Subitem 1</a></li>
                    <li><<a href="">Subitem 2</a></li>
                </ul>
            </li>
            <li>
                <a href="">Item 4</a>
                <ul class="submenu">
                    <li><<a href="">Subitem 1</a></li>
                    <li><<a href="">Subitem 2</a></li>
                </ul>
            </li>
            <li><a href="">Item 5</a></li>
        </ul>
    </div>
</div>

---

但是如果你想让你的 HTML 只需使用此选择器：

a:hover + .submenu, .submenu:hover {
    display:block;
}

并更改此样式：

.submenu {
    display:none;
    padding:0px;
    position:absolute;
    width:100%;  /* or something else */
}

演示

Answer 2

您可以使用 CSS 相邻选择器：

a:hover + .submenu {
    display:block;
}

Answer 3

你没有<ul>html代码应该像

 <nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

和 CSS 喜欢

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

在你的代码中，尝试这个：

 <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li class="submenu">
        <ul>
           <li><a href="">Subitem 1</a></li>
           <li><a href="">Subitem 2</a></li>
        </ul>
        </li>
</ul>