将下拉菜单（子菜单）添加到现有菜单

Question

我想在现有菜单栏中添加一个下拉选项（子菜单）。

这是我的CSS和HTML代码。

我找到了很多下拉菜单。 但对我来说非常重要的是，我只想将新功能添加到现有菜单中，而不需要对整个菜单进行太多更改。

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: right;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

<div class="topnav" id="myTopnav">
 
  <a href="#news">Speed Dial</a>
  <a href="#news">Speed Dial</a>
 

Answer 1

我只是想通过修改自己的代码来满足您的要求。

样式/ CSS更正留给你。

尝试一下。

<强>截图

<强>代码

＆＃13;

＆＃13;

            .topnav {
                background-color: #333;
                height: 50px;
            }

            .topnav li {
                float: left;
                display: block;
                text-align: right;
                padding: 14px 16px;
                font-size: 17px;
                background: transparent;
                width: 150px;
            }

            .topnav li a{
                padding: 14px 16px;
                color: #f2f2f2;
                text-decoration: none;
            }

            .topnav li a:hover{
                background-color: #ddd;
                color: black;
            }

            .topnav li.active {
                background-color: #4CAF50;
                color: white;
            }

            .subnav {
                background-color: blue;
                overflow: hidden;
                display : none;
                width: 200px;
                margin-top: 15px;
                padding: 0px;
            }

            .subnav li {
                float: left;
                display: block;
                text-align: right;
                padding: 14px 16px;
                font-size: 17px;
            }

            .subnav li a {
                color: #f2f2f2;
                text-decoration: none;
            }

            .subnav li:hover {
                background-color: #ddd;
                color: black;
            }

            .subnav li.active {
                background-color: #4CAF50;
                color: white;
            }

            .topnav li:hover .subnav{
                display : block;
            }

＆＃13;

        <ul class="topnav" id="myTopnav">
            <li>
                <a href="#news">Main 1</a>
            </li>
            <li>
                <a href="#news">Main 2</a>
            </li>
            <li>
                <a href="#news">Main 3 with sub</a>
                <ul class="subnav">
                    <li>
                        <a href="#news">sub 1</a>
                    </li>
                    <li>
                        <a href="#news">sub 2</a>
                    </li>
                </ul>
            </li>
        </ul>

＆＃13;

＆＃13;

＆＃13;