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

ASP.NET MVC does not automatically refresh when changes are made to the CSS file

Currently, I am diving into the world of Bootstrap 4 within an ASP.NET MVC project, exclusively making changes to the index.cshtml file in JetBrains Rider. However, I've encountered a strange issue that has me stumped. Each day, when I begin writing ...

css.netasp.net-mvcbootstrap-4rider

Show the sticky dropdown only when an error occurs during submission

My goal is to have the dropdown selected only when an error occurs, and here is the script I am using <select name="usertype" id="usertype" class="form-control"> <option value="">Please select the user type</option> <option va ...

phphtmlpoststicky

Adding a class to a clicked button in Vue.js

A unique function of the code below is showcasing various products by brand. When a user clicks on a brand's button, it will display the corresponding products. This feature works seamlessly; however, I have implemented a filter on the brands' lo ...

javascriptcssvue.jsvuejs2vue-component

Applying the Active CSS class to a Bootstrap Carousel

I'm currently working with a bootstrap carousel that displays dynamic images fetched from a backend API. The challenge I'm facing is that I'm unable to set the active class for the individual slides. If I hardcode the active class, all slide ...

javascripthtmlreactjscarouselbootstrap-5

Font Awesome solely alters the font size within html, rather than css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...

cssfont-awesome

Determining the precise margin within a nested div structure

Hopefully, my description of a "nested div" was accurate. My current situation involves an image within a div structured like this: content -> content-inner -> column_left I'm struggling to start the image at 0 px (the extreme left side of th ...

htmlcss

What is the best way to implement a keypress event in this code?

As a JavaScript and jQuery newbie, I have a question regarding adding a simple key press action to this code. How can I implement functionality where pressing the Right Arrow key takes me to the next image, and pressing the Left Arrow key takes me to the p ...

javascriptjqueryhtmlcssnavigation

Use CSS3 to conceal the form while displaying the default div

In my project, I am restricted to using only HTML5 and CSS3. Currently, I have a form that requires simulating the action of "sending form data". Upon clicking the submit button, the form should be hidden and a default div (#result) needs to be displayed. ...

htmlcss

When making a jQuery + AJAX request, IE8 is causing a null return value

I'm completely stumped as to why this issue is happening. To start, the code has been checked and validated by the W3C validator as HTML5, except for some URL encoding problems (such as & needing to be &amp;), but I don't have the ability ...

javascriptjqueryhtmlajaxinternet-explorer

Unable to connect HTML data to the view section using angular.js

I am trying to incorporate some HTML content into my view using angular.js. time.html: <table class="table table-bordered table-striped table-hover" id="dataTable"> <tr> <td width="100" align="center">Time <i class="fa fa-long- ...

javascripthtmlangularjs

Tips on appending a parameter to an image URL using JavaScript

On my website, I am able to insert images with specified width and height using this code: <img src="image.php?w=100&h=100"> I would like the image size to change based on the device screen width. For screens smaller than 600px, I want to displa ...

javascripthtmlimageurl-parameters

The behavior of Material-UI Drawer varies when used on tablets

Encountering some strange issues with the Material-UI drawer component. It's scrolling horizontally on my iPad, while it scrolls vertically on my MacBook and Android Phone. Expected Result on MacBook: https://i.sstatic.net/txBDf.png On my MacBook, it ...

javascriptcssreactjsmaterial-ui

Ways to merge two select options in a form

I'm attempting to merge the selections from two dropdown menus in a form into one variable before submitting the form. Here is an overview of my code: In new.html.erb (for RoR): <%= form_for :character, url: characters_path, method: :post do |f| ...

javascriptjqueryhtmlruby-on-railsruby-on-rails-4

Guide on adding the contents of non-empty <td> tags using Javascript or JQuery

My goal is to calculate the total sum of all the HTML content within <td> elements with the attribute name='gross_val'. Here are the <td> elements I am working with: <tr><td name="gross_val" align="right" title="gross_val1" ...

javascriptjqueryhtmlsumhtml-table

Using jQuery, you can create and add an element to the page when a user clicks

Currently, my webpage contains numerous anchor tags that link to various video files, along with a single div element: <a href="http://www.example.com/example-1.mkv" class="video">1</a> <a href="http://www.example.com/example-2.mkv" class=" ...

javascriptjqueryhtml

Tips for extracting text from a selenium webelement icon that displays hovertext

Let's use Amazon as an example. Suppose we want to extract the star rating for a product. When hovering over the stars, we see a text element that says "4.0 out of 5 stars" and upon inspecting the code, we find: <span class="a-icon-alt">4.0 ou ...

pythonhtmlpython-3.xseleniumselenium-webdriver

I'm having trouble adding a background image, even though I have set it to static. What could be

I attempted to add a background image to my Django website, but unfortunately, it was not successful. I followed the steps provided in this Stack Overflow answer here, however, it did not work. I even made changes to the database by migrating them, but s ...

javascriptpythonhtmlcssdjango

Firefox is having trouble loading SVG files

For some reason, the SVG image is loading on all browsers except for Firefox. I checked the DOM but couldn't find the code. Just to clarify, I am serving the page from Tomcat 9.0.34 <kendo-grid grid-options="gridOptions"> <img src= ...

cssangularjssvgfirefox

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

I successfully applied rounded corners to the first and last elements of a styled button using CSS. Here is how it looks: The issue arises when I dynamically insert new buttons using Angular's ng-if. The new buttons disrupt the rounded corners of th ...

cssangularjs

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

javascriptjqueryhtmlcss