How to create a simple link with a submenu[Answered] RSS

• • Reply
  grafic.web

  Member

  327 Points

  1770 Posts

  How to create a simple link with a submenu

  Dec 12, 2016 08:58 AM|grafic.web|LINK

  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

  Your wish is your command!!!
• • Reply
  Cathy Zou

  Star

  8670 Points

  2882 Posts

  Re: How to create a simple link with a submenu

  Dec 13, 2016 07:01 AM|Cathy Zou|LINK

  Hi grafic.web,

  Something like below:

  <style type="text/css">  
  
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  grafic.web

  Member

  327 Points

  1770 Posts

  Re: How to create a simple link with a submenu

  Dec 14, 2016 09:29 AM|grafic.web|LINK

  Hi Cathy Zou,

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

  thanks

  Your wish is your command!!!