Jump to content

CSS SubMenu modification


Ari

Recommended Posts

Hi,

Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu.

Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help.

Regards,

Ari.

Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**).

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
    }
    
    ul.topnav {
      list-style-type: none;
      margin: 0px;
      padding: 0;
      overflow: hidden;
      background-color: #2D5C88;
      text-align: center;
      /* For fixed header   */
      position: fixed;
      width: 100%;
      z-index: 1000;
    }
    
    ul.topnav li {
      display: inline;
    }
    
    ul.topnav li a {
      display: inline-block;
      color: #fff;
      text-align: center;
      padding: 8px 30px 8px 30px;
      text-decoration: none;
      transition: 0.3s;
      font-size: 13px;
      font-family: 'Verdana', Geneva, sans-serif;
    }
    
    ul.topnav li a:hover {
      background-color: #33699b;
    }
    
    ul.topnav li.icon {
      display: none;
    }
    
    @media screen and (max-width:680px) {
      ul.topnav li:not(:first-child) {
        display: none;
      }
      ul.topnav li.icon {
        float: right;
        display: inline-block;
      }
    }
    
    @media screen and (max-width:680px) {
      ul.topnav.responsive {
        position: relative;
      }
      ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      ul.topnav.responsive li {
        float: none;
        display: inline;
      }
      ul.topnav.responsive li a {
        display: block;
        text-align: left;
      }
    }
  </style>
</head>

<body>

  <ul class="topnav" id="myTopnav">
    <li><a class="active" href="google.com">Menu1</a></li>
    <li><a href="http://www.gogle.com">**Menu2**</a></li>
    <li><a href="http://www.gogle.com/">Menu3</a></li>
    <li class="icon">
      <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()"></a>
    </li>
  </ul>
</body>

</html>

 

Edited by Ari
more clarification
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...