Creating Drop Down Menu on click CSS

by

In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the “tabindex” attribute to allow them to gain focus. 

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}
<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>

More Related Contents:

  1. JS hide function error
  2. How to read with JavaScript [closed]
  3. Get the longest text in HTML document using Jquery or javascript
  4. How to implement something like this GIF that using mouse drag and select items
  5. Javascript counting all the characters from a HTML document
  6. Set cookie and get cookie with JavaScript [duplicate]
  7. Load and execution sequence of a web page?
  8. Check if an element contains a class in JavaScript?
  9. Disabling browser print options (headers, footers, margins) from page?
  10. JSFiddle code not working in my own page
  11. All About…. Z-Index?
  12. How to disable scroll without hiding it?
  13. jQuery: Get selected element tag name
  14. Why my show hide button needs double-click on first time
  15. How to dynamically create ‘@-Keyframe’ CSS animations?
  16. Infinity Loop Slider Concepts
  17. Make anchor link go some pixels above where it’s linked to
  18. Where should I put the CSS and Javascript code in an HTML webpage?
  19. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  20. jQuery vs document.querySelectorAll
  21. Is it possible to style a title? (and with CSS or js?) [duplicate]
  22. Change text color based on brightness of the covered background area?
  23. Invert text color on mouse hover
  24. Javascript-Setting background image of a DIV via a function and function parameter
  25. Gaussian Blur onHover Using jQuery
  26. How to keep elements non-refreshed
  27. How do you swap DIVs on mouseover (jQuery)?
  28. Jquery/Javascript Opacity animation with scroll
  29. How to get a leaflet map canvas to have a 100% height?
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment