Question

在以下代码中寻找一些帮助样式化子菜单。目前，子菜单项不显示。我希望他们在悬停时放下。有什么建议？我是这一切的新手，所以我非常感谢任何建议或帮助。谢谢。

                <nav id="navbar_text">
                    <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="aboutus.html">About</a></li>
                    <li><a href="#">Products</a></li>

                        <ul class="submenu">
                        <li><a href="index.html">Fireplaces & Accessories</a></li>
                        <li><a href="aboutus.html">Stoves</a></li>
                        <li><a href="aboutus.html">Outdoor Kitchens</a></li>
                        <li><a href="aboutus.html">Gas Grills</a></li>
                        </ul>

                    <li><a href="#">Services</a></li>

                        <ul class="submenu">
                        <li><a href="index.html">Chimney Services</a></li>
                        <li><a href="aboutus.html">Gas Services</a></li>
                        <li><a href="aboutus.html">Custom Design</a></li>
                        </ul>
                    </ul>
                 </nav>

            </div> <!--END navbar-->


#navbar_text a:link{
    color: #bca380;
}

#navbar_text a:hover{
    color: #dccfbd;
}

#navbar_text {
    word-spacing: 15px;
}

#navbar_text li{
    display:inline;
}


#navbar_text ul li a {
    display:inline;
    padding: 5px;
    background: #663333;
    margin-top: 5px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 150%;
    color: #bca380;
    text-decoration: none;

}

ul.submenu {


       display: none;


        }


li:hover ul.submenu {

        display: block;
                }

Answer 1

您需要将子菜单ul放在li元素中，如下所示：

<nav id="navbar_text">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About</a></li>
        <li><a href="#">Products</a>
            <ul class="submenu">
                <li><a href="index.html">Fireplaces & Accessories</a></li>
                <li><a href="aboutus.html">Stoves</a></li>
                <li><a href="aboutus.html">Outdoor Kitchens</a></li>
                <li><a href="aboutus.html">Gas Grills</a></li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul class="submenu">
                <li><a href="index.html">Chimney Services</a></li>
                <li><a href="aboutus.html">Gas Services</a></li>
                <li><a href="aboutus.html">Custom Design</a></li>
            </ul>
        </li>
    </ul>
</nav>

样式子菜单

1 个答案: