如何在css中制作下拉菜单？

Question

I'm trying to follow example of a drop-down menu in CSS from W3 Schools, but it doesn't work.我正在尝试遵循 W3 Schools 的 CSS 下拉菜单示例，但它不起作用。 I think I've copied everything exactly, but no result.我想我已经完全复制了所有内容，但没有结果。 However, when I copy and paste their code - everything works.但是，当我复制并粘贴他们的代码时 - 一切正常。

I've been trying to figure it out for 3 days, but no luck.我一直试图弄清楚3天，但没有运气。 Could someone tell what is wrong with my code, so I can learn from it, please?有人能告诉我我的代码有什么问题，所以我可以从中学习吗？

Dropdown is meant to be on the last menu item - Articles.下拉菜单应位于最后一个菜单项 - 文章。

 .menu_box{ background-color: #63707e; overflow: auto; height: 60px; list-style-type: none; margin: 0; } li a, .dropbtn { float: left; color: white; text-decoration: none; font-size: 150%; width: 25%; text-align: center; padding: 1% 0; } .menu_box a:hover, .dropdown:hover .dropbtn { background-color: #c8dad3; } li.dropdown { position: relative; } .dropdown_content { display: none; position: absolute; background-color: #c8dad3; } .dropdown_content a { text-decoration: none; display: block; } .dropdown:hover .dropdown_content { display: block; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test page</title> </head> <body> <ul class="menu_box"> <li><a href="#">Home</a></li> <li><a href="#">Experience</a></li> <li><a href="#">Hobbies</a></li> <li class="dropdown"> <a href="#" class = "dropbtn">Articles</a></li> <div class="dropdown_content"> <a href="#">Accounting</a> <a href="#">Excel tips</a> <a href="#">Cars</a> </div> </ul> </body> </html>

Answer 1

The problem is that you've closed off your .dropdown <li> element with a </li> directly after your <a> tag:问题是您在<a>标签之后直接用</li>关闭了.dropdown <li>元素：

This closing </li> should come after the .dropdown_content <div> , making .dropdown_content a child of .dropdown , and thus to allow the selector .dropdown:hover .dropdown_content to target the dropdown content correctly.这个结束</li>应该在.dropdown_content <div> ，使.dropdown_content成为.dropdown_content的子.dropdown ，从而允许选择器.dropdown:hover .dropdown_content正确定位下拉内容。

This can be seen in the following:这可以在以下内容中看到：

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test page</title> <style> .menu_box { background-color: #63707e; overflow: auto; height: 60px; list-style-type: none; margin: 0; } li a, .dropbtn { float: left; color: white; text-decoration: none; font-size: 150%; width: 25%; text-align: center; padding: 1% 0; } .menu_box a:hover, .dropdown:hover .dropbtn { background-color: #c8dad3; } li.dropdown { position: relative; } .dropdown_content { display: none; position: absolute; background-color: #c8dad3; } .dropdown_content a { text-decoration: none; display: block; } .dropdown:hover .dropdown_content { display: block; } </style> </head> <body> <ul class="menu_box"> <li><a href="#">Home</a></li> <li><a href="#">Experience</a></li> <li><a href="#">Hobbies</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Articles</a> <div class="dropdown_content"> <a href="#">Accounting</a> <a href="#">Excel tips</a> <a href="#">Cars</a> </div> </li> </ul> </body> </html>

Answer 2

Close the li tag properly.正确关闭 li 标签。

Nested list ( Structure )嵌套列表（结构）

<ul>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

Nested list ( Example )嵌套列表（示例）

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Experience</a></li>
  <li><a href="#">Hobbies</a></li>
  <li><a href="#">Articles</a>
    <ul class="dropdown">
        <li><a href="#">Accounting</a></li>
        <li><a href="#">Excel tips</a></li>
        <li><a href="#">Cars</a></li>
    </ul>
  </li>
</ul>

Here's the complete code这是完整的代码

 a { text-decoration: none; } nav { font-family: sans-serif; } ul { background: darkorange; list-style: none; margin: 0; padding-left: 0; } li { color: #fff; background: grey; display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.25s; } li a { color: #fff; } li:hover { background: black; cursor: pointer; } ul li ul { background: orange; visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all 0.25s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; }

 <nav role="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Experience</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Articles</a> <ul class="dropdown"> <li><a href="#">Accounting</a></li> <li><a href="#">Excel tips</a></li> <li><a href="#">Cars</a></li> </ul> </li> </ul> </nav>

Answer 3

I think you have missed some the css below have mention your mistakes just correct it.Inside the code snipped I have mentioned the reasons.我想你已经错过了一些下面的 css 提到了你的错误只是纠正它。在剪下的代码中我已经提到了原因。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
    <style>
      .menu_box{
        background-color: #63707e;
        overflow: auto;
        line-height: 60px;  /** change height property to line-height so that you home,Experience ,Hobbies,Articles tabs will be aligned vertically center. **/
        list-style-type: none;
        margin: 0;
         }

        li{
       float:left;   /** you should add float left to li elements so that home, experience, hobbies, Articles will be displayed from left to right one after another **/
       }

        li a, .dropbtn {
        color: white;
        text-decoration: none;
        font-size: 20px;  /** use px for font-size **/  
        displayl:inline-block;
        text-align: center;
        padding: 12px 14px;  /** give padding equally on all sides for better ui **/
        }    

        /** you have add on hover background color to li a:hover, not for .menu_box class **/
       li a:hover, .dropdown:hover .dropbtn {
        background-color: #c8dad3;
       }

       li.dropdown { /** your li.dropdown should display inline block this inline-block helps to show the dropdown elements **/
         display:inline-block;
        }

       .dropdown_content {
        display: none;
        position: absolute;
        background-color:  #c8dad3;
        z-index:1; /** you have include z-index:1 otherwise your dropdown will be not overolayed. **/
      }
      .dropdown_content a {
        text-decoration: none;
        display: block;

      }    
      .dropdown:hover .dropdown_content {
        display: block;
      }    
    </style>
  </head>
  <body>
    <ul class="menu_box">
      <li><a href="#">Home</a></li>
      <li><a href="#">Experience</a></li>
      <li><a href="#">Hobbies</a></li>
      <li class="dropdown">
        <a href="#" class = "dropbtn">Articles</a>  
         <div class="dropdown_content">
           <a href="#">Accounting</a>
           <a href="#">Excel tips</a>
           <a href="#">Cars</a>
         </div>
        </li> <!-- closing li tag should be here otherwise you dropdown won't work -->
    </ul>
  </body>
</html>

Below I have added the modified code,Just check it.下面我已经添加了修改后的代码，检查一下。 It now works fine.它现在工作正常。

 .menu_box{ background-color: #63707e; overflow: auto; line-height: 60px; /** change height property to line-height so that you home,Experience ,Hobbies,Articles tabs will be aligned vertically center. **/ list-style-type: none; margin: 0; } li{ float:left; /** you should add float left to li elements so that home experience hobbies Articles will be displayed from left to right one after another **/ } li a, .dropbtn { color: white; text-decoration: none; font-size: 20px; /** use px for font-size **/ displayl:inline-block; text-align: center; padding: 12px 14px; /** give padding equally on all sides for better ui **/ } /** you have add on hover background color to li a:hover, not for .menu_box class **/ li a:hover, .dropdown:hover .dropbtn { background-color: #c8dad3; } li.dropdown { /** your li.dropdown should display inline block this inline-block hepls to show the dropdown elements **/ display:inline-block; } .dropdown_content { display: none; position: absolute; background-color: #c8dad3; z-index:1; /** you have include z-index:1 otherwise your dropdown will be not overolayed. **/ } .dropdown_content a { text-decoration: none; display: block; } .dropdown:hover .dropdown_content { display: block; }

 <body> <ul class="menu_box"> <li><a href="#">Home</a></li> <li><a href="#">Experience</a></li> <li><a href="#">Hobbies</a></li> <li class="dropdown"> <a href="#" class = "dropbtn">Articles</a> <div class="dropdown_content"> <a href="#">Accounting</a> <a href="#">Excel tips</a> <a href="#">Cars</a> </div> </li> <!-- closing li tag should be here otherwise you dropdown won't work **/ </ul> </body>

如何在css中制作下拉菜单？

问题描述

3 个解决方案

解决方案1
2 已采纳 2019-07-30 00:57:09

解决方案2
0 2019-07-30 02:32:56

解决方案3
0 2019-07-30 02:39:41

如何在css中制作下拉菜单？

问题描述

3 个解决方案

解决方案1 2 已采纳 2019-07-30 00:57:09

解决方案2 0 2019-07-30 02:32:56

解决方案3 0 2019-07-30 02:39:41

解决方案1
2 已采纳 2019-07-30 00:57:09

解决方案2
0 2019-07-30 02:32:56

解决方案3
0 2019-07-30 02:39:41