{"id":270203,"date":"2018-05-01T06:59:52","date_gmt":"2018-05-01T13:59:52","guid":{"rendered":"http:\/\/css-tricks.com\/?p=270203"},"modified":"2020-12-13T10:17:16","modified_gmt":"2020-12-13T18:17:16","slug":"solved-with-css-dropdown-menus","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/solved-with-css-dropdown-menus\/","title":{"rendered":"Solved with CSS! Dropdown Menus"},"content":{"rendered":"\n<p>CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we\u2019re seeing some really creative solutions emerging. Some of those solutions focus around not only making the web prettier, but making it more accessible, and making styling accessible experiences better. I\u2019m definitely here for it!<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"article-series\">\n<h4>Article Series:<\/h4>\n<ol>\n<li><a href=\"https:\/\/css-tricks.com\/solved-with-css-colorizing-svg-backgrounds\/\">Colorizing SVG Backgrounds<\/a><\/li>\n<li>Dropdown Menus (this post)<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/solved-with-css-logical-styling-based-on-the-number-of-given-elements\/\">Logical Styling Based On the Number of Given Elements<\/a><\/li>\n<\/ol>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>A common <abbr title=\"User Interface\">UI<\/abbr> pattern that we see on the web are dropdown menus. They\u2019re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-270206\" id=\"post-270206\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menus-1.jpg?ssl=1\" alt=\"A collage of screenshots showing different dropdown menu examples.\" data-recalc-dims=\"1\"\/><figcaption>A Google search for &#8220;dropdown menu&#8221; yields many examples<\/figcaption><\/figure>\n\n\n\n<p>Let\u2019s see if we can make one of these menus with CSS alone. We\u2019ll create a list of links within a nav component like so:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;nav role=\"navigation\">\n  &lt;ul>\n    &lt;li>&lt;a href=\"#\">One&lt;\/a>&lt;\/li>\n    &lt;li>&lt;a href=\"#\">Two&lt;\/a>&lt;\/li>\n    &lt;li>&lt;a href=\"#\">Three&lt;\/a>&lt;\/li>\n  &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>Now, say we want a sub-menu dropdown on the second navigation item. We can do the same thing there and include a list of links within that list item:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"6, 7, 8, 9, 10\"><code markup=\"tt\">&lt;nav role=\"navigation\">\n  &lt;ul>\n    &lt;li>&lt;a href=\"#\">One&lt;\/a>&lt;\/li>\n    &lt;li>&lt;a href=\"#\">Two&lt;\/a>\n      &lt;ul class=\"dropdown\">\n        &lt;li>&lt;a href=\"#\">Sub-1&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Sub-2&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Sub-3&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/li>\n    &lt;li>&lt;a href=\"#\">Three&lt;\/a>&lt;\/li>\n  &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>We now have our two-tiered navigation system. In order to have the content hidden and displayed when we want it to be visible, we\u2019ll need to apply some CSS. All style properties have been removed from the following example for clarity on interaction:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li {\n display: block;\n transition-duration: 0.5s;\n}\n\nli:hover {\n  cursor: pointer;\n}\n\nul li ul {\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  transition: all 0.5s ease;\n  margin-top: 1rem;\n  left: 0;\n  display: none;\n}\n\nul li:hover > ul,\nul li ul:hover {\n  visibility: visible;\n  opacity: 1;\n  display: block;\n}\n\nul li ul li {\n  clear: both;\n  width: 100%;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Gxwogy\" src=\"\/\/codepen.io\/anon\/embed\/Gxwogy?height=450&amp;theme-id=1&amp;slug-hash=Gxwogy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Gxwogy\" title=\"CodePen Embed Gxwogy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, the submenu dropdown is hidden, but will be exposed and become visible when we hover over its correlating parent in the navigation bar. By styling <code>ul li ul<\/code>, we have access to that submenu, and by styling <code>ul li ul li<\/code>, we have access to the individual list items within it.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-problem\">The Problem<\/h3>\n\n\n<p>This is starting to look like what we want, but we\u2019re still far from finished at this point. Web accessibility is a core part of your product&#8217;s development, and right now would be the perfect opportunity to bring this up. Adding <code>role=\"navigation\"<\/code> is a good start, but in order for a navigation bar to be accessible, one should be able to tab through it (and focus on the proper item in a sensible order), and also have a screen reader accurately read out loud what is being focused on.<\/p>\n\n\n\n<p>You can hover over any of the list items and clearly see what is being hovered over, but this isn\u2019t true for tab navigation. Go ahead and try to tab through the example above. You lose track of where the focus is visually As you tab to <strong>Two<\/strong> in the main menu, you\u2019ll see a focus indicator ring, but when you tab to the next item (one of its submenu items), that focus disappears.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-270239\" id=\"post-270239\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menus-tab.gif?ssl=1\" alt=\"An animated screenshot showing focus rings on menu items as they are tabbed.\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Now, it\u2019s important to note that theoretically you are focused on this other item, and that a screen reader would be able to parse that, reading <strong>Sub-One<\/strong>, but keyboard users will not be able to see what\u2019s going on and will lose track.<\/p>\n\n\n\n<p>The reason this happens is because, while we\u2019re styling the hover of the parent element, as soon as we transition focus from the parent to one of the list items within that parent, we lose that styling. This makes sense from a CSS standpoint, but it\u2019s not what we want.<\/p>\n\n\n\n<p>Luckily, there is a new CSS pseudo class that will give us exactly what we want in this case, and it\u2019s called <code>:focus-within<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-solution-focus-within\">The Solution: <code>:focus-within<\/code><\/h3>\n\n\n<p>The <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/\"><code>:focus-within<\/code><\/a> pseudo selector is a part of the <a href=\"https:\/\/drafts.csswg.org\/selectors-4\/#the-focus-within-pseudo\" rel=\"noopener\">CSS Selectors Level 4 Spec<\/a> and tells the browser to apply a style to a parent when any of its children are in focus. So in our case, this means that we can tab to <strong>Sub-One<\/strong> and apply a <code>:focus-within<\/code> style along with the <code>:hover<\/code> style of the parent and see exactly where we are in the navigation dropdown. In our case it would be <code>ul li:focus-within &gt; ul<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3\"><code markup=\"tt\">ul li:hover > ul,\nul li:focus-within > ul,\nul li ul:hover {\n  visibility: visible;\n  opacity: 1;\n  display: block;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eMaBgX\" src=\"\/\/codepen.io\/anon\/embed\/eMaBgX?height=450&amp;theme-id=1&amp;slug-hash=eMaBgX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eMaBgX\" title=\"CodePen Embed eMaBgX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Sweet! It works!<\/p>\n\n\n\n<p>Quick detour! If you&#8217;re only supporting modern browsers, the CSS we&#8217;ve seen so far is fine. But you should know that when <em>any<\/em> browser doesn&#8217;t understand part of a selector, it throws the entire selector out. So if you want to support IE 11, you can&#8217;t mix in the <code>:focus-within<\/code> part. <\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">\/* This compound selector will still work in IE 11 because :focus-within isn't mixed in *\/\nul li:hover > ul,\nul li ul:hover,\nul li ul:focus {\n  visibility: visible;\n  opacity: 1;\n  display: block;\n}\n\n\/* IE 11 won't get this, but at least the top-level menus will work *\/\nul li:focus-within > ul {\n  visibility: visible;\n  opacity: 1;\n  display: block;\n}<\/code><\/pre>\n\n\n\n<p>Now, when we tab to the second item, our submenu pops up, and as we tab through the submenu, the visibility remains! Now, we can append our code to include <code>:focus<\/code> states alongside <code>:hover<\/code> to give keyboard users the same experience as our mouse users.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-270208\" id=\"post-270208\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menus-3.gif?ssl=1\" alt=\"An animated screenshot of a menu showing the sybmenu being revealed when it is actively tabbed.\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>In most cases, such as on direct links, we usually can just write something like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a:hover,\na:focus {\n  ...\n}<\/code><\/pre>\n\n\n\n<p>But in this case, since we\u2019re applying hover styles based on the parent <code>li<\/code>, we can again utilize <code>:focus-within<\/code> to get the same look at feel when tabbing through. This is because we can\u2019t actually <em>focus<\/em> on the <code>li<\/code> (unless we add a <code>tabindex=\"0\"<\/code>). We\u2019re actually focusing on the link (<code>a<\/code>) within it. <code>:focus-within<\/code> allows us to still apply styles to the parent <code>li<\/code> when focusing on the link (pretty darn cool!):<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li:hover,\nli:focus-within {\n  ...\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-270209\" id=\"post-270209\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menus-4.gif?ssl=1\" alt=\"An animated screenshot showing a tabbed menu where the submenu is revealed when actively tabbed, the submenu items show the focus ring when active, and the hover styles are also applied when active.\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>At this point, since we are applying a focus style, we can do something that\u2019s typically <a href=\"https:\/\/css-tricks.com\/focusing-on-focus-styles\/\">not recommended<\/a> (remove the styling of that blue outline focus ring). We can do this by:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li:focus-within a {\n  outline: none;\n}<\/code><\/pre>\n\n\n\n<p>The above code specifies that when we focus within list items via the link (<code>a<\/code>), do not apply an outline to the link item (<code>a<\/code>). It\u2019s pretty safe to write it this way, because we\u2019re exclusively styling the hover state, and with browsers that do not support <code>:focus-within<\/code>, the link will still get a focus ring. Now our menu looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-270210\" id=\"post-270210\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menus-5.gif?ssl=1\" alt=\"An animated screenshot showing the final result of the tabbed menu where the focus ring has been removed and replaced by the hover state when menu items are actively tabbed.\" data-recalc-dims=\"1\"\/><figcaption>Final menu using <code>:focus-within<\/code>, <code>:hover<\/code> states, and customizing the focus ring to disappear<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RMmogp\" src=\"\/\/codepen.io\/anon\/embed\/RMmogp?height=450&amp;theme-id=1&amp;slug-hash=RMmogp&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RMmogp\" title=\"CodePen Embed RMmogp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-about-aria\">What About ARIA?<\/h3>\n\n\n<p>If you\u2019re familiar with accessibility, you may have heard of ARIA labels and states. You can use these to your advantage to also create these types of dropdowns with built-in accessibility at the same time! You can find an excellent example <a href=\"http:\/\/heydonworks.com\/practical_aria_examples\/#submenus\" rel=\"noopener\">here<\/a> by <a href=\"https:\/\/twitter.com\/heydonworks\" rel=\"noopener\">Heydon Pickering<\/a>. When including ARIA markup, your code would look a little more like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"5, 6\"><code markup=\"tt\">&lt;nav role=\"navigation\">\n  &lt;ul>\n    &lt;li>&lt;a href=\"#\">One&lt;\/a>&lt;\/li>\n    &lt;li>&lt;a href=\"#\" aria-haspopup=\"true\">Two&lt;\/a>\n      &lt;ul class=\"dropdown\" aria-label=\"submenu\">\n        &lt;li>&lt;a href=\"#\">Sub-1&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Sub-2&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Sub-3&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/li>\n    &lt;li>&lt;a href=\"#\">Three&lt;\/a>&lt;\/li>\n  &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>You\u2019re adding <code>aria-haspopup=\"true\"<\/code> to the parent of the dropdown menu to indicate an alternative state, and including <code>aria-label=\"submenu\"<\/code> on the actual dropdown menu itself (in this case our list with <code>class=\"dropdown\"<\/code>.<\/p>\n\n\n\n<p>These properties themselves will give you the functionality you need to show the dropdown menu, but the downside is that they only work with JavaScript enabled.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support-caveat\">Browser Support Caveat<\/h3>\n\n\n<p>Speaking of caveats, let\u2019s talk about browser support. While <code>:focus-within<\/code> does have <em>pretty good<\/em> browser support, it\u2019s important to note that Internet Explorer and Edge are not supported, so your users on those platforms will not be able to see the navigation.<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-focus-within\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">60<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">52<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>The ultimate solution here would be to use <em>both<\/em> ARIA markup and CSS <code>:focus-within<\/code> to ensure a solid dropdown experience for your users.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pVvXmK\" src=\"\/\/codepen.io\/anon\/embed\/pVvXmK?height=450&amp;theme-id=1&amp;slug-hash=pVvXmK&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pVvXmK\" title=\"CodePen Embed pVvXmK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you want to be able to use this feature in the future, please <a href=\"https:\/\/wpdev.uservoice.com\/forums\/257854-microsoft-edge-developer\/suggestions\/11725071-implement-focus-within-from-selectors-4\" rel=\"noopener\">upvote it on Edge User Voice<\/a>! And <a href=\"https:\/\/wpdev.uservoice.com\/forums\/257854-microsoft-edge-developer\/suggestions\/15087966-improve-default-focus-style\" rel=\"noopener\">upvote <code>:focus-ring<\/code><\/a> while you\u2019re at it, so that we\u2019ll be able to style that focus ring and create a beautiful interactive web experience for all &#x1f600;<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-on-focus-within-and-a11y\">More on <code>:focus-within<\/code> and A11Y<\/h3>\n\n\n<ul><li>Scott O\u2019Hara\u00a0<a href=\"http:\/\/www.scottohara.me\/blog\/2017\/05\/14\/focus-within.html\" rel=\"noopener\">wrote about\u00a0<code>:focus-within<\/code><\/a>, highlighting demos like highlighted\u00a0<code>&lt;table><\/code>\u00a0rows and dropdown menus<\/li><li>Kushagra Gour on\u00a0<a href=\"https:\/\/css-tricks.com\/a-css-approach-to-trap-focus-inside-of-an-element\/\">creating a focus-trapped modal<\/a><\/li><li>Eric Bailey\u00a0<a href=\"https:\/\/css-tricks.com\/focusing-on-focus-styles\/\">on focus styles in general<\/a><\/li><li>Chris on\u00a0<a href=\"https:\/\/css-tricks.com\/keeping-parent-visible-child-focus\/\">keeping a parent element visible when child is focused<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/tag\/focus-within\/\">All articles on CSS-Tricks related to\u00a0<code>:focus-within<\/code><\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A common <abbr title=\"User Interface\">UI<\/abbr> pattern that we see on the web are dropdown menus. They\u2019re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.<\/p>\n<p>Let\u2019s see if we can make one of these menus with CSS alone.<\/p>\n","protected":false},"author":250503,"featured_media":270464,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"A CSS-only solution for accessible dropdown menus by @una.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[466,882,880],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menu-collage.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":305102,"url":"https:\/\/css-tricks.com\/stop-using-dropdown\/","url_meta":{"origin":270203,"position":0},"title":"Stop Using &#8220;Dropdown&#8221;","date":"March 16, 2020","format":false,"excerpt":"Adrian Roselli notes that it might actually mean: A <select> menuAn ARIA Listbox, Combobox, Menu, or Disclosure WidgetAn input with a <datalist>An input with autocompleteA <details><summary> blockAn accordionFlyout navigation In my own usage, I tend to mean \"A UI pattern where you click\/tap a small thing and a big thing\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menu-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":196605,"url":"https:\/\/css-tricks.com\/dropdown-menus-with-more-forgiving-mouse-movement-paths\/","url_meta":{"origin":270203,"position":1},"title":"Dropdown Menus with More Forgiving Mouse Movement Paths","date":"February 23, 2015","format":false,"excerpt":"This is a fairly old UX concept that I haven't heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow corridors to accurately get where it needs to in a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":246599,"url":"https:\/\/css-tricks.com\/priority-navigation-scrolling-dropdowns\/","url_meta":{"origin":270203,"position":2},"title":"A Priority+ Navigation With Scrolling and Dropdowns","date":"October 18, 2016","format":false,"excerpt":"The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the \"Priority+ Navigation\" concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it's working out\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312544,"url":"https:\/\/css-tricks.com\/striking-a-balance-between-native-and-custom-select-elements\/","url_meta":{"origin":270203,"position":3},"title":"Striking a Balance Between Native and Custom Select Elements","date":"June 12, 2020","format":false,"excerpt":"Here\u2019s the plan! We\u2019re going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we\u2019re going to make it accessible. We\u2019re not going to try to replicate everything that the browser does by default with a native <select> element. We\u2019re going\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/select-custom-native.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336401,"url":"https:\/\/css-tricks.com\/in-praise-of-the-unambiguous-click-menu\/","url_meta":{"origin":270203,"position":4},"title":"In Praise of the Unambiguous Click Menu","date":"March 18, 2021","format":false,"excerpt":"I still remember my excitement when I learned how to build a hover-triggered submenu with just CSS. (It was probably after reading this 2003 article from A List Apart.) At the time, it was a true CSS trick. Seriously. Wild times. That went a little something like this: <ul class=\"my-menu\">\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/click-menu.gif?fit=1000%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":150992,"url":"https:\/\/css-tricks.com\/targetting-menu-elements-submenus-navigation-bar\/","url_meta":{"origin":270203,"position":5},"title":"Targeting Menu Elements with Submenus in a Navigation Bar","date":"September 23, 2013","format":false,"excerpt":"The following is a guest post by Ray Messina. Ray was interested in sharing this technique as a way to pay forward things he's learned from this site in the past, which is awesome. You might be aware of the jQuery .has method, which allows you to select an element\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/dropdown-menu-collage.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270203"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250503"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=270203"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270203\/revisions"}],"predecessor-version":[{"id":330933,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270203\/revisions\/330933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/270464"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=270203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=270203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}