I was able to solve it I am trying to have my "about" and "rooms" dropdown to be able to only expand when clicked on and displaying a small arrow similar https://www.syracuse.edu/ in their "Info For" dropdown. When tabbing through it can work as is. Also I noticed that in when tabbing through the menu and tabbing backwards (shift+tab) it dosnt go back up the dropdown why is that? Another issue is when I shrink the window to display the quick menu and tabbing through the menu it skips the about and rooms link why is that? Here is the code i have so far, thank you. <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Author URL: https://codepen.io/andornagy/pen/RNeydj Description: A Generic Hierarchical Menu Navigation Version: 1--> <style> /* CSS Document */ body { background: #212121; font-size:22px; line-height: 32px; color: #ffffff; margin: 0; padding: 0; word-wrap:break-word !important; font-family: 'Open Sans', sans-serif; height: 100vh; /*100% of the viewport*/ display: flex; flex-direction: column; } .scroll { overflow-y: scroll; } h1 { font-size: 60px; text-align: center; color: #FFF; } h3 { font-size: 30px; line-height: 34px; text-align: center; color: #FFF; } h3 a { color: #FFF; } a { color: #FFF; } h1 { margin-top: 100px; text-align:center; font-size:60px; line-height: 70px; font-family: 'Bree Serif', 'serif'; } #container { margin: 0 auto; max-width: 890px; } p { text-align: center; } .toggle, [id^=drop] { display: none; } /* Giving a background-color to the nav container. */ nav { margin:0; padding: 0; background-color: #E64A19; } #logo { display: block; padding: 0 30px; float: left; font-size:20px; line-height: 60px; } /* Since we'll have the "ul li" "float:left" * we need to add a clear after the container. */ nav:after { content:""; display:table; clear:both; } /* Removing padding, margin and "list-style" from the "ul", * and adding "position:reltive" */ nav ul { float: right; padding:0; margin:0; list-style: none; position: relative; } /* Positioning the navigation items inline */ nav ul li { margin: 0px; display:inline-block; float: left; background-color: #E64A19; } /* Styling the links */ nav a { display:block; padding:14px 20px; color:#FFF; font-size:17px; text-decoration:none; } nav ul li ul li:hover { background: #000000; } /* Background color change on Hover */ nav a:hover { background-color: #000000; text-decoration: underline; } /* Hide Dropdowns by Default * and giving it a position of absolute */ nav ul ul { display: none; position: absolute; /* has to be the same number as the "line-height" of "nav a" */ top: 60px; } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display:inherit; } /* Fisrt Tier Dropdown */ nav ul ul li { width:170px; float:none; display:list-item; position: relative; } /* Second, Third and more Tiers * We move the 2nd and 3rd etc tier dropdowns to the left * by the amount of the width of the first tier. */ nav ul ul ul li { position: relative; top:-60px; /* has to be the same number as the "width" of "nav ul ul li" */ left:170px; } /* Making dropdowns tabbable */ li ul {display: none;} li:focus-within ul, li:hover ul {display: block;} /* Media Queries --------------------------------------------- */ @media all and (max-width : 768px) { #logo { display: block; padding: 0; width: 100%; text-align: center; float: none; } nav { margin: 0; } /* Hide the navigation menu by default */ /* Also hide the */ .toggle + a, .menu { display: none; } /* Stylinf the toggle lable */ .toggle { display: block; background-color: #E64A19; padding:14px 20px; color:#FFF; font-size:17px; text-decoration:none; border:none; } .toggle:hover { background-color: #000000; } /* Display Dropdown when clicked on Parent Lable */ [id^=drop]:checked + ul { display: block; } /* Change menu item's width to 100% */ nav ul li { display: block; width: 100%; } nav ul ul .toggle, nav ul ul a { padding: 0 40px; } nav ul ul ul a { padding: 0 80px; } nav a:hover, nav ul ul ul a { background-color: #000000; } nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a{ padding:14px 20px; color:#FFF; font-size:17px; } nav ul li ul li .toggle, nav ul ul a { background-color: #212121; } /* Hide Dropdowns by Default */ nav ul ul { float: none; position:static; color: #ffffff; /* has to be the same number as the "line-height" of "nav a" */ } /* Hide menus on hover */ nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; } /* Fisrt Tier Dropdown */ nav ul ul li { display: block; width: 100%; } nav ul ul ul li { position: static; /* has to be the same number as the "width" of "nav ul ul li" */ } } @media all and (max-width : 330px) { nav ul li { display:block; width: 94%; } } </style> <title>Menu Navigation Test</title> </head> <body> <header> <nav> <div id="logo">Syracuse University Libraries</div> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li><a href="#">Home</a></li> <li> <!-- First Drop Down --> <label for="drop-1" class="toggle">About</label> <a href="#">About</a> <ul> <li><a href="#">Departments</a></li> <li><a href="#">News</a></li> </ul> </li> <li> <!-- First Drop Down --> <label for="drop-2" class="toggle">Rooms</label> <a href="#">Rooms</a> <input type="checkbox" id="drop-2"/> <ul> <li><a href="#">Resources</a></li> <li><a href="#">Links</a></li> <li> <!-- Second Drop Down --> <label for="drop-3" class="toggle">Spaces</label> <a href="#">Rooms</a> <input type="checkbox" id="drop-3"/> </li> </ul> </li> <li><a href="#">Special Collections</a></li> <li><a href="#">Giving</a></li> <li><a href="#">More</a></li> </ul> </nav></header> <!-- Sample Text --> <section class="scroll" id="content"><h1><p>This is a Generic Hierarchical Menu Navigation.</p></h1> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p></section> <nav><footer> Copyright © 2020 Syracuse University Libraries </footer> </nav> <!-- Core Javascript Bottom --> <script src="/assets/plugins/jquery-1.12.3.min.js" type="text/javascript"></script> <script src="/assets/plugins/back-to-top.js" type="text/javascript"></script> </body> </html> Code (markup):