locked
How to create a simple link with a submenu RRS feed

  • Question

  • User1991482975 posted

    Hi i saw many navbar but i think i just need a simple link with a submeu, how to do this in pure css?

    Better if my submenu is like a megasubmenu

    thanks

    Monday, December 12, 2016 8:58 AM

Answers

  • User-707554951 posted

    Hi grafic.web,

    Something like below:

    <style type="text/css">  
    
    .dropdown {
        ;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        ;
        background-color:firebrick;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        background-color:cadetblue
    }
    
    .dropdown-content a:hover {background-color:darkgoldenrod}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
    
     <div class="dropdown">
      <a href="#">Portfolio</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>

    Out as below:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 13, 2016 7:01 AM

All replies

  • User-707554951 posted

    Hi grafic.web,

    Something like below:

    <style type="text/css">  
    
    .dropdown {
        ;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        ;
        background-color:firebrick;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        background-color:cadetblue
    }
    
    .dropdown-content a:hover {background-color:darkgoldenrod}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
    
     <div class="dropdown">
      <a href="#">Portfolio</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>

    Out as below:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 13, 2016 7:01 AM
  • User1991482975 posted

    Hi Cathy Zou,

    is it possible to have the submenu as big as the container? something like megamenu?

    thanks

    Wednesday, December 14, 2016 9:29 AM