如何在下拉菜单中向<a href="“#”">Link 3</a>添加子下拉菜单？

Question

Here is the code below, I am having trouble adding Link 3 in the drop down menu seems like that every time I add this it does not accept it a creates a new specific sub list that is not associated.这是下面的代码，我在下拉菜单中添加链接 3 时遇到问题，似乎每次添加它时它都不接受它创建一个新的未关联的特定子列表。 Tried locating more info on the web but nothing concrete, Any ideas?尝试在 web 上找到更多信息，但没有具体的信息，有什么想法吗？ Trying to apply dropdown submenu into the code.尝试将下拉子菜单应用到代码中。

-

List item项目清单

======= =======

 body { font-family: Arial, Helvetica, sans-serif; }.navbar { overflow: hidden; background-color: #333; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: right; overflow: hidden; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: red; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style_layout.css"> <title>Travel Agency</title> </head> <body> <header> <div class="navbar"> <a href="#home"> <a class="active" href="#home"><img src="images/logo.jpg" width="100px"></a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> </div> </div> </header> </body> </html>

Answer 1

Ok, tried this, but it's not the cleanest way to do it好的，试过了，但这不是最干净的方法

<html>
<head>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown , .dropdown2{
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn, .dropdown2 .dropbtn2 {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn , 
.dropdown2:hover .dropbtn2{
  background-color: red;
}

.dropdown-content, .dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a, .dropdown-content2 a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover, .dropdown-content2 a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content, .dropdown2:hover .dropdown-content2 {
  display: block;
}
</style>
</head>
    <body>

        <header>
            <div class="navbar">
                <a href="#home">
                    <a class="active" href="#home"><img src="images/logo.jpg" width="100px"></a>
                    <div class="dropdown">
                        <button class="dropbtn">
                            Dropdown 
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <div class="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                                <div class="dropdown2" style="float: none;">
                                    <button class="dropbtn2" style="color: black">
                                        Dropdown 2
                                        <i class="fa fa-caret-down"></i>
                                    </button>
                                    <div class="dropdown-content2">
                                        <a href="#">Link 1</a>
                                        <a href="#">Link 2</a>
                                        <a href="#">Link 3</a>
                                        <a href="#">Link 4</a>
                                        <a href="#">Link 5</a>
                                    </div>
                                </div>
                            <a href="#">Link 4</a>
                            <a href="#">Link 5</a>
                        </div>
                    </div>
                </a>
            </div>
        </header>

    </body>
</html>

如何在下拉菜单中向<a href="“#”">Link 3</a>添加子下拉菜单？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-11-17 02:06:48

如何在下拉菜单中向<a href="“#”">Link 3</a>添加子下拉菜单？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-11-17 02:06:48

解决方案1
0 已采纳 2019-11-17 02:06:48