添加一个下拉菜单（子菜单）到现有的菜单
问题描述：
我想添加一个下拉选项（子菜单）到现有的菜单栏。添加一个下拉菜单（子菜单）到现有的菜单
这是我的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 {
\t float: left;
\t display: block;
\t color: #f2f2f2;
\t text-align: right;
\t padding: 14px 16px;
\t text-decoration: none;
\t 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>
答
我只是想通过修改自己的代码，以满足您的要求。
风格/ CSS更正留给你。
试一试。
截图
代码
.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;
} <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>
你尝试过什么，什么是不工作？如果它对你“非常重要”，那么你肯定已经在某处做了一些努力。 – David
请提供更多关于您的要求的信息。 –
@SarinJacobSunny，我只是想添加下拉菜单到菜单中的一些元素。 – Serbon