Как добавить второе выпадающее меню к первому?

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>