我继承了一个网页，我想创建一个悬停下拉菜单，但我遇到了一些麻烦。

Question

基本上，我已经开始为我的社会担任网站管理员。我正在尝试清理导航栏，我想包含一个下拉菜单，但我无法用我现在拥有的内容来弄清楚。当前菜单如下所示：

<nav>
        <ul>
            <li id="home"><a <?=nlink($page, "home")?> href="home">Home</a></li>
            <li id="ourshows"><a <?=nlink($page, "shows")?> href="shows">Our Shows</a></li>
            <li id="booking"><a <?=nlink($page, "booking")?> href="booking">Booking</a></li>
            <li id="rehearsals"><a <?=nlink($page, "rehearsals")?> href="rehearsals">Rehearsals</a></li>
            <li id="history"><a <?=nlink($page, "history")?> href="history">History</a></li>
            <li id="contact"><a <?=nlink($page, "contact")?> href="contact">Committee &amp; Contact</a></li>
            <li id="involved"><a <?=nlink($page, "involved")?> href="involved">Get Involved</a></li>
            <li id="calendar"><a <?=nlink($page, "calendar")?> href="calendar">Calendar</a></li>
        </ul>
    </nav>

这是我的 CSS 在本节中的样子：

nav {
border-top: thin #ccc solid;
border-bottom: thin #ccc solid;
font-size: 1.2em;
}

nav > ul > li {
list-style-type: none;
display: inline-block;
color: black;
margin-right: 1.5rem;
font-variant: small-caps;
text-decoration: none;
}

nav a {
    text-decoration: none;
color: #555;
}

nav a:active {
color: #555;
}

nav a:visited {
color: #555;
}


nav a:focus {
color: #555;
}

nav a:hover {
color: #000;
}

nav a.selected {
font-weight: bold;
}

p:first-letter {
font-size: 120%;
}

Answer 1

我认为你看起来像这样：

nav {
    border-top: thin #ccc solid;
    border-bottom: thin #ccc solid;
    font-size: 1.2em;
}
nav > ul > li {
    list-style-type: none;
    display: inline-block;
    color: black;
    margin-right: 1.5rem;
    font-variant: small-caps;
    text-decoration: none;
}
nav a {
    text-decoration: none;
    color: #555;
}
nav a:active {
    color: #555;
}
nav a:visited {
    color: #555;
}
nav a:focus {
    color: #555;
}
nav a:hover {
    color: #000;
}
nav a.selected {
    font-weight: bold;
}
p:first-letter {
    font-size: 120%;
}
nav > ul > li > ul {
    display: none;/*hide nested ul*/
    position: absolute;
    padding: 0;
    list-style-type: none;
}
nav > ul > li:hover ul {
    display: block;/*show nested ul on hover*/
}

<nav>
    <ul>
        <li id="home"> <a href="home">Home</a></li>
        <li id="ourshows"><a href="shows">Our Shows</a>
          <ul>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
            </ul>
        </li>
        <li id="booking"><a href="booking">Booking</a>

        </li>
        <li id="rehearsals"><a href="rehearsals">Rehearsals</a>

        </li>
        <li id="history"><a href="history">History</a>

        </li>
        <li id="contact"><a href="contact">Committee &amp; Contact</a>

        </li>
        <li id="involved"><a href="involved">Get Involved</a>

        </li>
        <li id="calendar"><a href="calendar">Calendar</a>

            <ul>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 2

这是一个非常基本的带有下拉菜单的导航示例：

JSFiddle

---

基本上，它使用严格的 CSS 来确定是否显示子菜单。让我解释一下。

层次结构如下：

<ul> //Outer menu
    <li> //Menu item
        <ul> //Submenu
            <li> //Submenu item

因此，要显示子菜单，您需要在父菜单中的任意 <li> 中添加一个子 <ul>。

---

子菜单<ul> 设置有以下属性：

body > ul li ul
{
    position: absolute; /*We are taking the submenu out of the flow of the doc.*/
    top: 100%; /*Move it just below the parent <li>*/
    left: 0; /*Align to the left of the parent*/

    display: none; /*Hide it when not active*/
}

请注意，这些只是重要属性。我在实际的小提琴中添加了一些其他颜色等。

---

然后我们使用:hover 属性在必要时显示子菜单。

body > ul li:hover ul
{
    display: block; /*Show the ul*/
}

砰！你有一个下拉菜单。如果您还有其他问题，请发表评论。