Activate the dropdown menu when ul element is in focus

I am working on creating a dropdown navigation using pure CSS. I want the dropdown menu to appear when clicking on the ul. The issue I am facing is that simple ul:focus > ul does not seem to work, even though there is an anchor within it. However, the :hover and :active selectors are functioning perfectly fine.

HTML

<li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
    </ul>
</li>

CSS

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

Check out the code here: https://codepen.io/anon/pen/vgpQWV

htmlcss

Answer №1

Ensure that your selector is 

#primary_nav_wrap ul li > a:focus + ul
.

Here's the breakdown:

If the <a> element directly inside the <li> has focus, then apply these styles to the immediately adjacent <ul>.

Check out the corrected example below:

#primary_nav_wrap {
  margin-top: 15px
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}
#primary_nav_wrap ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
  background: #ddd
}
#primary_nav_wrap ul li:hover {
  background: #f6f6f6
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
#primary_nav_wrap ul li > a:focus + ul {
  display: block
}
<h1>Testing menu</h1>
<nav id="primary_nav_wrap">
  <ul>
    <li class="current-menu-item"><a href="#">Home</a>
    </li>
    <li><a href="#">Menu 1</a>
      <ul>
        <li><a href="#">Sub Menu 1</a>
        </li>
        <li><a href="#">Sub Menu 2</a>
        </li>
        <li><a href="#">Sub Menu 3</a>
        </li>
        <li><a href="#">Sub Menu 4</a>
          <ul>
            <li><a href="#">Deep Menu 1</a>
              <ul>
                <li><a href="#">Sub Deep 1</a>
                </li>
                <li><a href="#">Sub Deep 2</a>
                </li>
                <li><a href="#">Sub Deep 3</a>
                </li>
                <li><a href="#">Sub Deep 4</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Deep Menu 2</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Sub Menu 5</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Sub Menu 1</a>
        </li>
        <li><a href="#">Sub Menu 2</a>
        </li>
        <li><a href="#">Sub Menu 3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a>
      <ul>
        <li class="dir"><a href="#">Sub Menu 1</a>
        </li>
        <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSUE BUT MAYBE NOT?</a>
          <ul>
            <li><a href="#">Category 1</a>
            </li>
            <li><a href="#">Category 2</a>
            </li>
            <li><a href="#">Category 3</a>
            </li>
            <li><a href="#">Category 4</a>
            </li>
            <li><a href="#">Category 5</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Sub Menu 3</a>
        </li>
        <li><a href="#">Sub Menu 4</a>
        </li>
        <li><a href="#">Sub Menu 5</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
    <li><a href="#">Menu 5</a>
    </li>
    <li><a href="#">Menu 6</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The copyright (©) symbol is unresponsive to rotation

Why can't I rotate the © character? Am I missing something? .copy { font-size: 12px; font-family: Arial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } <span class="copy">&copy; This is not ...

htmlcss

JavaScript: Retrieving the names of children within a <div> element

Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...

javascripthtmlclass-names

What is the best method to achieve a width of 100% for an element (textarea) that has unspecified borders and padding, while also including the borders and padding

Native borders for input controls in various browsers often look more visually appealing compared to those set with CSS. However, the thickness of these native borders and padding can vary across different browsers, making it difficult to predict beforehan ...

css

Accessing User Input Data with JQuery

Can someone help me figure out how to store the input value from a Materialize select form in HTML using a variable in javascript/jquery? Here is the HTML code for the form: <div class="input-field col s12"> <select> <option va ...

javascriptjqueryhtmlmaterialize

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

jqueryhtmlcssvisual-studio-lightswitchlightswitch-2013

Encountering a roadblock while trying to work with AngularJS Material radio buttons

In one of my projects, I have implemented a polling system where users can choose a question from a list and then proceed to the options page. On the options page, users can select their answer choices and submit their responses. The results are then displ ...

javascriptangularjshtmlmaterial-designangular-material

Is there a way to modify the border shape of items in the navigation bar?

Is there a way to achieve this particular shape when the current page is being displayed? https://i.stack.imgur.com/HELTM.jpg This is how my current code looks: current { transform: skew(-20deg); border: 1px solid white; color: black; background ...

htmlcss

Steps to remove a row from a table in a ReactJS component

I'm struggling with implementing a delete operation for table rows and encountering errors. Any assistance in resolving this issue would be greatly appreciated. Since I am unsure how to set an auto-incrementing id, I used Date.now(). Now my goal is t ...

javascripthtmlreactjs

Left-hand navigation panel that complements entire screen

Web Design .sidenav { height: 100%; position: relative; overflow-y: scroll; background: #000000; width: 15%; } Ensuring the menu covers the full screen correctly by setting its height to 100% is effective, but it may appear awkward wh ...

htmlcssheight

Removing Embedded Json Element from a Collection in AngularJS HTML

In my JSON Collection, I want to display the Email ID that is marked as IsPreffered = TRUE using AngularJS HTML without using JavaScript. This is my JSON Collection: { "user" : [ { "Name" : "B. Balamanigandan", "Email": [ ...

javascripthtmlangularjsjsonangular-filters

How to ensure Angular mat-button-toggle elements are perfectly aligned within their respective groups

https://i.stack.imgur.com/Wjtn5.png Hello there, I'm trying to make the numbers in the first group match the style of the second group (noche, mañana...). I've set both the group and individual element width to 100%, but the numbers beyond 22 ...

htmlcssangulartypescriptangular-material

The stature of Bootstrap's columns

Exploring Bootstrap has been an exciting journey for me, as I believe it will simplify the process of creating visually appealing web pages. I'm currently facing a challenge in understanding these two examples: Bootstrap 3: http://codepen.io/rhutchi ...

csstwitter-bootstraptwitter-bootstrap-3

"Enhance user experience with jQuery's text expansion and collapse

Figuring out how to collapse and expand text with a button click has been challenging for me. I managed to make the text collapse when the button is clicked, but now I also need it to expand back again. The goal is to have the text initially hidden, then e ...

javascriptjqueryhtml

Streaming HTTP content on a domain secured with HTTPS using HTML5

Is it possible to stream HTTP on an HTTPS domain without triggering browser security errors? By default, the browser tends to block such requests. I rely on the hls.js library for desktop support with .m3u8 files. When I play content directly (on mobile o ...

javascripthtmlvideobrowserhttps

Bootstrap's inline form features a button on a separate line from the rest of the form

I grabbed this code directly from bootstrap's official documentation: <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="inp ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Convert HTML Tables to PDF Format

I am facing an issue with exporting my table data into a PDF using jQuery. I have made sure to install all the necessary library files, but my code doesn't seem to be working correctly. Can anyone spot any errors in my code or suggest what might be mi ...

javascriptphphtmlmysql

Using percentages for sizing and margins in CSS

Looking to create a visually appealing page that always fills the entire screen? Check out this code snippet that does just that: #posts{ width:100%; height:auto; background:#666; } .entry{ float:left; margin-left: 4%; margin-top:10 ...

javascriptjquerycss

I'm encountering a "confirm" error within the data table. Any suggestions on how to resolve this issue?

When I try to use two datatables columns in confirm, an error occurs when the text 'do you want cancel?' is displayed. The issue seems to be with the text itself and not the code. How should we go about fixing this problem? This is my current cod ...

javascriptphphtmldatatables

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Within my custom Angular component, a third-party library is dynamically adding an HTML element. I am seeking a solution that can apply Angular's encapsulation attributes to these elements regardless of the specific third-party library being used. If ...

cssangularangular-components

What is the best way to apply maximum height to an element using CSS?

Looking for help with my website: I made some changes in the code using Firebug and identified these elements that I want to modify (but changes are not live yet) The following code represents the elements on my site: This is the HTML code: <di ...

htmlcsstwitter-bootstrap