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

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

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

Answer 2

这不是创建菜单的正确方法，您需要更改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 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>

自定义CSS导航菜单，没有下拉菜单

3 个答案: