html - 自定义 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