Jump to content
Sign in to follow this  
sue

multilevel dropdown menu

Recommended Posts

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...