CSS: targeting the final item within a two-level menubar structure

I am facing a challenge with my multi-level menu, where the menu line consists of items separated by '|' and some items have dropdown lists. The issue is with the CSS pseudo-class last-child capturing the wrong item, and I need it to target a specific menu line item (item3).

Here is the desired result.

<div class="menu">
  <a href="">Item1</a>
  <a href="">Item2</a>
  <div class="dropdown">
    <a class="dropbtn">Item3</a>
    <div class="dropdown_content">
      <a href="">Subitem1</a>
      <a href="">Subitem2</a>
    </div>
  </div>
</div>

I am looking for a pure CSS solution that works on IE11 without any JavaScript. It's possible that adjusting the HTML structure of the menu itself could resolve this issue automatically.

Thank you in advance! :)

htmlcssdrop-down-menucss-selectors

Answer №1

Apply the :last-child condition to the div element in order to target the last anchor within the last div, using > to specify immediate children.

/* STYLING FOR MENU */

div.menu {
  display: inline;
}
div.menu a {
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-right: 1px solid lightgrey;
  font-size: 12pt;
}
div.menu > div:last-child > a {
  border-right: 0px;
}

/* DROP DOWN STYLING */

.dropdown {
  position: relative;
  display: inline;
}
.dropdown_content {
  display: none;
  z-index: 1;
  position: absolute;
  top: 1em;
  right: 0;
  background-color: #f9f9f9;
  white-space: nowrap;
  border-bottom: 1px solid lightgrey;
}
.dropdown_content a {
  padding: 0.2em;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown_content {
  display: block;
}
<div class="menu">
  <a href="">Item1</a>
  <a href="">Item2</a>
  <div class="dropdown">
    <a class="dropbtn">Item3</a>
    <div class="dropdown_content">
      <a href="">Subitem1</a>
      <a href="">Subitem2</a>
    </div>
  </div>
</div>

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

Avoid vertical clipping issues by utilizing the overflow-y property

I am working on a horizontal navigation menu with two levels; the second level is displayed vertically. The number of items in the second level can vary, sometimes causing the list to extend beyond the browser view. To address this issue, I have used overf ...

htmlcss

Extract image styles from a different webpage

My website is located at: I'm attempting to replicate the testimonial photo effect that can be seen on this website: https://i.sstatic.net/70Jqd.png What CSS code do I need to include in order to make the image with the class "client-pic" circula ...

htmlcss

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...

javascripthtmlangularjssingle-page-application

Twists and turns as I mix up Kineticjs

After scrambling my puzzle, I now need it to be rotated. Can anyone help me with this? Thanks :) fillPatternImage:imageObj, x:-pieceWidth*i/2, y:-pieceHeight*j/2, stroke: "#000000", ...

javascripthtmlrotationkineticjs

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

csshtml

`To position an element within a div without affecting its layout, use absolute positioning``

Is it possible to add an element to a div that is aligned to the right but still sits on top of the other element within the div? Here are some images to illustrate the issue: https://i.sstatic.net/dW7ev.png The problem arises when you try to center the ...

htmlcssbootstrap-5

The reason why setting height to 0 is ineffective in a CSS definition

Within my current project, I am utilizing vue.js 2 and have implemented an img component. Below is the code for this component: <template> <div class="banner"> <img class="banner-img" :src="bannerImg"/> </div> </template> ...

javascriptcssvue.jsvuejs2

Webpack struggles with handling css using the css-loader when trying to implement (react)-css-modules

Trying to set up webpack with react and (react)-css-modules, but encountering an issue where webpack is unable to parse the css. This is the standard configuration being used. const webpack = require("webpack"), merge = require("webpack-merge"), path ...

cssnode.jsreactjswebpackcss-loader

Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

I have an SVG diagram with some yellow points represented as circles. <html> <title>Yellow circles</title> <body> <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" ...

htmlcssgoogle-chromefirefoxsvg

The href attributes are not being retrieving correctly

I'm currently working on extracting the URLs for each restaurant listed on this page and have developed a Python script for this purpose: import time from selenium import webdriver from selenium.webdriver.common.keys import Keys browser = webdriver ...

pythonhtmlseleniumselenium-webdriver

distinguish different designs for individual components in Angular 5

My project is divided into two main parts: one for public web pages and the other for an admin control panel. Each part has its own set of CSS and javascript files for custom templates. If I include all CSS and js files in index.html, they all load at the ...

cssangularmodulebootstrap-4

Attempting to locate the element's position using Selenium in Python

quem_esta_sacando = driver.find_elements_by_xpath("//div[@class='gameinfo-container tennis-container']/div[@class='team-names']/div[@class='team-name']") this is how I located the correct class, but now I want to ...

pythonhtmlcssseleniumwebdriver

Optimizing CSS across various pages and screens sizes with critical importance

My CSS file is in need of optimization for quicker loading times. It contains numerous components utilized across various pages (such as the start page, category pages, and detail pages) on different screen sizes (mobile, tablet, desktop). Manual optimizat ...

cssperformanceweb

Tips on increasing video size upon visiting a website. HTML, JavaScript, and potentially jQuery can be used for video animation

Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...

javascriptjqueryhtmlcss

What is the reason for translate3d(…) causing a scrollbar to appear on iframes?

Is there a way to hide the tiny, fixed scrollbar that appears at the bottom of an <iframe> with overflow-x: scroll, even when there is no content to scroll, while keeping the transform: translate3d(0px, 0px, 0px) style set? https://i.sstatic.net/kaV ...

htmlcssiframe

Step-by-step guide on generating a fluid list with Express and HTML

Looking to create a dynamic list by fetching data from a JSON file. I want the list items to redirect me to specific content based on their IDs when clicked. However, my current approach is not working as expected, and the list needs to be truly dynamic. ...

javascripthtmlnode.jsexpress

Discovering all class names following the same naming convention and storing them in an array through Javascript

Hey everyone, I could use some assistance with a coding challenge. I'm aiming to extract all class names from the DOM that share a common naming convention and store them in an array. For instance: <div class="userName_342">John</div> & ...

javascripthtml

Is it possible to retrieve elements by their ID when the ID values are constantly changing?

I'm facing an issue with accessing dynamic IDs using `getElementById`. I require this value to perform random calculations involving different elements. MY CODE <div class="col-lg-4" v-for="data in datas"> <button class="btn btn-outline-d ...

javascripthtmlvue.js

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

javascriptphpjqueryhtmlcss

Make sure the 'card-title' is positioned directly before a div element

How can I align the 'title' to start right above 'first yeah', with the image positioned accordingly? https://i.sstatic.net/fyI2o.png I've attempted various methods (including using classes) but have been unsuccessful so far Her ...

htmlcssbootstrap-4bootstrap-5hbs