multilevel dropdown menu

[sue]

Hi,

I am using w3css top navigation bar using a drop down menu. I would like to have a multilevel drop down menu  for some of the items. I would like that each season opens up to another submenu where I can display eg, the years pictures or blogs etc.

At the moment the code for the html and css is eg,

 HTML

 <div class="dropdown">
        <button class="dropbtn"><strong>History</strong></button>
            <div class="dropdown-content">
             <a href="#">Season2016</a>
             <a href="#">Season 2017</a>
        </div>
    </div> 

 

CSS  

.dropdown {
        font-family: "Comic Sans MS", cursive, sans-serif;
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 16px;    
    border: none;
    outline: none;
    color: black;
    padding: 14px 16px;
    background-color: inherit;
}

.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;
}