添加一个下拉菜单（子菜单）到现有的菜单

-2

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

这是我的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>

来源

2017-04-18 Serbon

你尝试过什么，什么是不工作？如果它对你“非常重要”，那么你肯定已经在某处做了一些努力。 – David

请提供更多关于您的要求的信息。 –

@SarinJacobSunny，我只是想添加下拉菜单到菜单中的一些元素。 – Serbon

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

风格/ 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>

来源

2017-04-19 06:03:23

添加一个下拉菜单（子菜单）到现有的菜单

回答

相关问题