html - 如何将第二个下拉菜单添加到第一个？

Question

我用css做了一个下拉菜单，但是我想问你，我怎样才能把第二个下拉菜单添加到第一个？如果不能用这段代码制作，我该如何制作呢？我尝试使用 droppy，但代码有问题我的意思是样式..

我使用这个 HTML:

<ul id="menu">
      <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
      <li class="selected"><a href="index.html">Index</a></li>
    <div class="dropdown">
        <li><a href="#">Drop Down</a></li>
              <div class="dropdown-content">
                <a href="#"> Link 1 </a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a> --> Here i want to add another drop down menu
                <a href="#">Link 4</a>
              </div>
    </div></ul>

还有这个 CSS:

    ul#menu
{ float: right;
  margin: 0;}

ul#menu li
{ float: left;
  list-style: none;
  margin: 2px 2px 0 0;
  background: #5A5A5A url(tab.png) no-repeat 0 0;
  border-top-right-radius: 1.5em;
  border-top-left-radius: 1.5em;
  overflow:hidden;
  max-height: 27px;}

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 35px 5px 28px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #5A5A5A url(tab.png) no-repeat 100% 0;} 

ul#menu li.selected a
{ height: 20px;
  padding: 6px 35px 5px 28px;}

ul#menu li.selected
{ margin: 2px 2px 0 0;
  background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
  }

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
  color: #FFF;}

ul#menu li a:hover
{ color: #E4EC04;}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    float:left;
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    margin-top: 30px;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 15px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 15px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

Answer 1

我应该说我一直在努力一个多小时才搞定这个。由于我刚刚学习了 HTML 和 CSS。但是很享受这样做，因为它让我学到了新东西。谢谢。

这是我目前所拥有的:

CSS:

#menu, #first, #second, #third {
    list-style-type: none;
    border: 1px solid black;
    }
    #menu {
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    width: 70px;
    margin: 25px;
    }

    #first, #second, #third {
    position: absolute;
    background-color: #f9f9f9;
    width: 50px;
    display:none; 
    padding-left: 0;
    width: 90px;
    margin-left: 25px;
    margin-right: 25px;
    }
    a { 
    text-decoration: none;
    color: black;

    }
    #menu:hover #first {
    display: block;
    }

    #first:hover #second {
    display: block;
    }
    .hover3:hover #third {
    display: block;
    }

这是 HTML:

<ul id="menu">
  <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
    <li class="hover"><a href="index.html">Index</a>
        <ul id="first">
            <li class="hover2"><a href="w">Drop Down</a>
                <ul id="second">
                    <li><a href="#"> Link 1 </a></li>
                    <li><a href="#">Link 2</a></li>
                    <li class="hover3"><a href="#">Link 3</a> 
                        <ul id="third">
                             <li><a href="#">Link 4</a></li>
                        </ul>
                    </li>

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