Question

我是CSS的新手，我正在尝试创建一个菜单，其中子列表仅在悬停时可见（并占用空间）。

我找到了visibility:collapse;属性，但这只掩盖了子列表，并在我的垂直菜单中留下了很大的差距。

这是我到目前为止所做的，但我不确定如何在悬停时实现可扩展的子菜单：

CSS：

nav a {
    text-decoration: none;
    color: white;
    font-family: 'Roboto', sans-serif; 
}

nav ul {
    list-style-type: none;
}

nav ul li ul {
    visibility: collapse;
}

HTML：

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gear.html">Gear</a>
                <ul>
                    <li><a href="p1.html">P1</a></li>
                    <li><a href="p2.html">P2>/a></li>
                    <li><a href="p3.html">P3/a></li>
                    <li><a href="p4.html">P4</a></li>
                    <li><a href="p5.html">P5</a></li>
                </ul>
            </li>
            <li><a href="news.html">News</a></li>
            <li><a href="contact.html">Contact</a></li> 
        </ul>
    </nav>

非常感谢您提供的任何帮助

Answer 1

当您将鼠标悬停在父列表上时，可以使用Pseduo选择器来定位子列表。

以下是Fiddle

所有你需要的是：

nav ul {
    position:relative;
    list-style-type: none;
    background-color:#eaeaea;
}

nav ul li ul {
    position:absolute;
    display:none;
    left:60px;
    background-color:#CCC;
}
nav ul li:hover ul {
    display:block;
}

当父项悬停时，它会定位子列表，并覆盖display:none;命令

Answer 2

HTML CODE：

<nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gear.html">Gear</a>
                <ul>
                    <li><a href="p1.html">P1</a></li>
                    <li><a href="p2.html">P2</a></li>
                    <li><a href="p3.html">P3</a></li>
                    <li><a href="p4.html">P4</a></li>
                    <li><a href="p5.html">P5</a></li>
                </ul>
            </li>
            <li><a href="news.html">News</a></li>
            <li><a href="contact.html">Contact</a></li> 
        </ul>
    </nav>

CSS代码：

nav a {
    text-decoration: none;
    color: white;
    font-family: 'Roboto', sans-serif; 
}

nav ul {
    list-style-type: none;
}
nav a{
    color:#000000;
}

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

<强> JSFIDDLE DEMO

Answer 3

而不是使用visibility: collapse;使用display:none属性，因为一旦使用visibility属性，就会始终存在空格。

你应该这样试试。

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

正在进行的演示http://jsbin.com/xivogawu/1/edit

Answer 4

visibility属性仅隐藏元素而不更改布局（即留下您已注意到的间隙）。此外，collapse值仅影响表行和列。

实现目标的最佳方法是使用display属性;试试这个：

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

CSS菜单（隐藏UL）

4 个答案: