Jump to content
Ari

CSS SubMenu modification

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

Share this post


Link to post
Share on other sites

That's a bootstrap example. It doesn't help with CSS.

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

×
×
  • Create New...