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

Question

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

有什么想法吗？

HTML 代码：

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

DEMO

<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 */
}

DEMO

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>