Question

我正在尝试制作带子菜单的菜单。我写了我的HTML，它看起来像：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a>
            <ul>
                <li><a href="#">dropdown 1</a></li>
                <li><a href="#">dropdown 2</a></li>
                <li><a href="#">submenu </a>
                    <ul>
                        <li><a href="#">submenu 1</a></li>
                        <li><a href="#">submenu 2</a></li>
                        <li><a href="#">submenu 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</nav>

我有一个链接到它的样式表，它看起来像：

nav ul {
    display:inline-block;
    position:relative;
    list-style:none;
}
nav ul ul {
    display:none;
}
nav ul li:hover > ul {
    display:block;
}

由于某种原因，列表显示为块。我试过float:left，但没有任何区别。

Answer 1

您必须为li元素添加display:inline-block：

nav li {
display:inline-block;
}

在这里查看示例：http://jsfiddle.net/9y1uzqye/1/

Answer 2

您需要使单个列表项使用块显示，而不是列表本身。

为什么我的显示器没有：内联工作？

2 个答案: