Comprehending the importance of a selector in a dropdown menu

Trying to figure out how to create a drop-down menu from CSS tricks, I found this code snippet:

<nav role="navigation">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>

CSS Styling:

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
}

ul {
  background: darkorange;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}
  
li a {
  color: #fff;
}

li:hover {
  background: red;
  cursor: pointer;
}

ul li ul {
  background: orange;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

The confusion arises with the selector ul li ul:hover. The author is questioning its necessity as removing it doesn't impact the functionality of the menu.

For further clarification and discussion, check out the demo and article link provided below:

Demo: https://stackblitz.com/edit/js-aftbkv?file=style.css

Article on CSS Tricks: https://css-tricks.com/solved-with-css-dropdown-menus/

Answer №1

The hover selector indicates that when the cursor is placed on an element, a certain action will take place. It enhances functionality.

If you look at the elements of the dropdown menu, they initially have their display set to display:none, but when hovered over, their display changes to display:block, making them visible.

If you remove all the hover effects, the functionality will not be present. This could be because you deleted them without saving the file or possibly due to cache issues. Without :hover, the expected functionality will not occur.

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

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

I am looking to implement a live search feature using jQuery. Below is the code snippet I have written: $("#searchInput").on("keyup", function () { var searchTerm = $("#searchInput").val(); $('li:contains("' + searchTerm + ' ...

Exploring design techniques in React Native

I am currently part of a team working on a react native project with multiple contributors. My goal is to find an effective way to segregate the styling tasks from coding, allowing UI developers to work independently without relying on code developers. In ...

Hide the parent div element if the nested unordered list does not contain any items

I transformed an HTML template into a typo3 template using automaketemplate. Within the HTML code, there is a structure of divs like this <div class="bigPostItWrap">1 <div class="postit">2 <div class="p ...

How can we call a function in HTML from an external JavaScript file?

I am attempting to utilize a function that I have defined in my .js file within my HTML document. js/newsalerts.js function decodeHTML(html) { //https://stackoverflow.com/a/2989105/4650297 var tempDiv = document.createElement("DIV"); tempDiv. ...

Dynamic styles object for React components with inline styles

I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

Implement custom styles to enhance the appearance of users' Magento websites

Is it possible to add additional CSS only to users/customers who are logged into our webshop? If so, how should I go about it - through XML or PHTML? Stian ...

Does renaming a sub-directory in the static directory of an IntelliJ Spring Boot project cause any changes?

I'm a newcomer to IntelliJ and I've been using it to develop a Spring Boot application. Right now, my project structure looks like this: My goal is to set up a "css" directory within the "static" directory under the "resources" section so that I ...

Is there a way to alter the color of radio buttons?

Is there a way to use CSS to change the background color of a radio button? I've searched online, but all the solutions I found involve JavaScript, which I don't fully understand. I attempted this CSS code, but it didn't have the desired eff ...

Guide to creating a radio button with the appearance of a toggle button

Is there a way to style radio buttons like toggle buttons using only CSS and HTML? I want the group of radio buttons to have the appearance of toggle buttons, while still maintaining their functionality as radio buttons. UPDATE: I am open to simply makin ...

Could LXML potentially determine the value of a class in HTML?

For instance, consider the following scenario: <button class="oW_lN oF4XW sqdOP yWX7d _8A5w5 ">MyTextIsHere</button> The "MyTextIsHere" part of the code can contain only two specific values: "Yes" and "No". Is it feasible to determine wh ...

What is the method to advance the opposing line in the dynamic chart?

Here is the link to the code for a dynamic graph. I am struggling with keeping the red line updated and moving forward together with the blue line. I cannot figure out why the red line remains static in the dynamic graph. Any suggestions on how to solve t ...

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

Load image in browser for future display in case of server disconnection

Incorporating AngularJS with HTML5 Server-Side Events (SSE) has allowed me to continuously update the data displayed on a webpage. One challenge I've encountered is managing the icon that represents the connection state to the server. My approach inv ...

Difficulty with the Jquery <span> tag on Mozilla 3.6.1

I am currently utilizing jQuery.post to display some data retrieved from a servlet. <div class="Label"> <span id="result" >Click on Check.</span> </div> <script> $(document).ready(function() { $("a").c ...

CSS - text featuring a gentle shadow hue and a deeper foreground color

I'm encountering an aesthetic issue where my list of texts have random light/bright colors, making them hard to read on white backgrounds. I've tried setting the text color to shadow, but now I want the text itself to be a darker, more readable c ...

Strange occurrences of radio buttons in AngularJS

When working with radio buttons, I noticed a strange behavior that I wanted to share. My goal was to have Radio Button 1 selected if the array is undefined, and Radio Button 2 selected when the array is defined. In the initial state, the array is indeed ...

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Striving to maintain the absolute positioning of the right column as users scroll through the left column has proven to be a challenging task. Despite exploring various solutions from stackoverflow and google, none seem to effectively address this issue. ...

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

Formulate a jQuery array consisting of droppable components

I have successfully implemented draggable li-elements and droppable boxes using jQuery UI. Here is my structure: A list of 3 different permission types <ul> <li data-action="create">Create</li> <li data-action="edit">Edi ...