What could be the reason for my ul hover effect not functioning as expected?

I'm struggling to create a menu where hovering over categories reveals another menu below it. I have created both the main menu and sub-menu, but I am unsure how to make the sub-menu appear on hover or apply any styling to it. I've tried various selectors like:

nav li.categories:hover .categories-ul

.categories:hover .categories-ul

.categories:hover nav .categories-ul

but nothing seems to work. What should I do?

.pc-nav-ul {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  backdrop-filter: hue-rotate(100deg) blur(5px);
}

.pc-nav-li {
  font-size: 1.5rem;
  font-family: var(--text-font);
  padding: 1rem;
  transition: 600ms;
}

.categories-ul {
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: 600ms;
}

nav li.categories:hover .categories-ul {
  background-color: red;
}

.categories-li {
  font-family: var(--text-font);
  font-size: 1.2rem;
}

.pc-nav-li:hover:not(.categories-li) {
  letter-spacing: 2px;
}
htmlcssdrop-down-menumenuhover

Answer №1

If you're looking for a solution, you might want to consider using the has() CSS function:

.pc-nav-ul {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  backdrop-filter: hue-rotate(100deg) blur(5px);
}

.pc-nav-li {
  font-size: 1.5rem;
  font-family: var(--text-font);
  padding: 1rem;
  transition: 600ms;
}

.categories-ul {
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  display: none;
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: 600ms;
}

.categories-li {
  font-family: var(--text-font);
  font-size: 1.2rem;
}

.pc-nav-li:hover:not(.categories-li) {
  letter-spacing: 2px;
}

.pc-nav:has(.categories:hover) .categories-ul {
  display: flex;
  background-color: red;
}
<nav class="pc-nav">
  <ul class="pc-nav-ul">
    <li class="pc-nav-li"><a href="#">home</a></li>
    <li class="pc-nav-li categories"><a class="categories" href="#">categories</a>
    </li>
    <li class="pc-nav-li"><a href="#">setting</a></li>
    <li class="pc-nav-li"><a href="#">login/sign up</a></li>
  </ul>
  <ul class="categories-ul">
    <li class="categories-li"><a href="">entertainment</a></li>
    <li class="categories-li"><a href="">literature</a></li>
    <li class="categories-li"><a href="">science</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</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

Navigating without the need for a mouse click

Is there a way to automatically redirect without user interaction? I need the redirection to happen without clicking on anything <script> setInterval(function(){ window.location.replace("http://your.next.page/"); }, 5000); // Redirec ...

javascripthtmljquery

Can information be transferred to a CSS document?

Currently working on developing a content management system (CMS) using PHP and exploring the possibility of passing a URL to an image. In my PHP pages, I am utilizing Twig templates and the {{ image1url }} to display the image URL. Is there a way to pas ...

phphtmlcsssymfony

Avoid showing duplicate values in the optgroup selection

Show the database value in the optgroup option. If the value of the parsing controller is equal to the option's value, do not display it within the HTML tag. Value of the parsing controller: {{$getData->status}} This is how my view blade looks: ...

phphtmllaravel

Is Jquery struggling to modify the visual enhancements?

Check out this link, I need the sidebar design to be similar to what is shown in the provided link. Furthermore, I am looking for a way to have a pointer that follows along with my selection on different labels such as home, charts, etc. Can anyone assis ...

javascriptjqueryhtml

What methods can I utilize to transmit Global variable data from a view to a controller?

In my Angular view file, I have the following code snippet. <!DOCTYPE html> <video id="myVideo" class="video-js vjs-default-skin"></video> <script> var dataUri; var videoData; var player = videojs("myVideo", { controls ...

javascriptangularjshtml

Having trouble locating the text box using Selenium in Java. Xpath and CSS selectors are not working

I'm currently attempting to locate the textbox in the HTML snippet below using chromedriver ...

cssgoogle-chromeseleniumxpath

Ways to display 8 videos on a desktop screen and 4 videos on a mobile device screen

There are 8 videos displayed on my computer screen, but I only want 4 to be shown when using mobile devices. ...

jqueryhtmlcssajax

Tips for effectively using the Susy +pad mixin

How can I use the +pad method to add padding on a p element without extending it past a certain point? I've tried using +pad, but the p always goes beyond the desired stopping place. Take a look at this screenshot for reference: The issue arises when ...

csssassmixinssusy-compass

Dim the background for all elements except for one

Seeking a way to create a dimmed-background effect by adjusting the opacity of all elements on the page except for one specific element. I've experimented with using the :not() selector as well as jQuery selectors to exclude certain elements, but have ...

javascriptjquerycsssasscompass-sass

How can input be fixed in place within a list inside an Ionic framework popover?

I have the following code in a popover template: <ion-popover-view class="customPopup"> <ion-header-bar class="bar bar-header barHeaderCustom"> <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1> </io ...

cssinputcss-positionionic-framework

The functionality to open the menu by clicking is experiencing issues

I'm attempting to replicate the Apple website layout. HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte ...

javascripthtmlcss

Bootstrap 4 allows for the use of the d-lg-flex class to create a flexible column layout

I'm facing an issue with my table on smaller screens where some columns need to be hidden. Here's the code snippet I'm using: <table> <tr> <td>Normal 1</td> <td class="d-lg-flex d-none">hidden 1</t ...

htmltwitter-bootstrapcssbootstrap-4

Creating a custom PHP header file that dynamically includes .js and .css files based on the page

Is there a more efficient way to dynamically include .css and .js files in the head tags of my header.php, based on the current open .php file? This would help reduce loading time by only including necessary files for each specific page. I've been co ...

javascriptphpcss

Inject some vibrancy by incorporating color in the space between the navbar and banner on the

Hello! I am relatively new to front-end development and I am currently working on converting a PSD design to code for a project. I am struggling a bit to understand certain concepts but I am eager to learn and improve. I am using Bootstrap 4 for this proje ...

htmlcssbootstrap-4frontendweb-frontend

Is it possible to dynamically utilize document.getElementById()?

I am attempting to print an HTML page using window.print after each REST API call updates the content. Is it possible to print continuously for each REST API call? var myPrintContent = document.getElementById("data-box"); var myPrintWindow = wind ...

javascripthtmlangularjs

Creating a gap in an HTML document with a 'division' element and cascading style sheets

I am struggling to create a blank space between my divs. Despite trying numerous CSS properties such as margin-top, padding-top, and others from various sources online, I have not been successful. The only way I can add space is by using an excessive amou ...

htmlcssweb

Using PHP DOM document, extract the menu array from an HTML string

Below is the snippet of code I am working with: $string = '<html><head></head><body><ul id="mainmenu"> <li id="1"><a href="1"> main menu 1 </a> </li> <li id="2"> <a href="2"> main ...

phphtmlparsingdomdomdocument

Using a background image in CSS for horizontal rules can override other styling rules

Encountered an unusual CSS bug: After using background-image to style hr, none of the subsequent rules or selectors are displaying on the page: hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0 ...

cssfirefox

Struggling to implement a sidebar in HTML using jQuery and running into issues?

I am struggling to create a template that includes a navbar, sidebar, and other elements that can be used across multiple HTML files. Despite trying different approaches, including changing the jQuery version and downloading jQuery, I am unable to make it ...

javascripthtmljquerycss

The 'SafeString' object does not have a 'get' attribute

I am having trouble rendering a string to a template. Here is the code I am currently working with: context = { 'order': order, 'ordered_items': ordered_items, 'change': change, ...

pythonhtmldjango