Struggling with a CSS problem involving the UL > LI > LI structure

Currently facing a challenge with the CSS on my website's main navigation menu.

The drop-down for menu items with child pages should have solid color, no border, round corners on the bottom, and a drop shadow.

I've almost got it right, but for some reason, the middle link (LI) is inheriting the round corners from the last LI.

Additionally, noticing that the hover effect on my menu's LI elements are not displaying the round corners correctly.

You can view the site at .

Appreciate any assistance. Thank you.

css html-lists wordpress-theming

Answer №1

Check out this CSS code snippet:

.menu ul > li + li{
    border: 0 solid #333333;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

Make sure to include the + li selector in the above CSS code.

.menu ul > li + li + li{
    border: 0 solid #333333;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

Alternatively, you can also visit this link for more information: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-last-child

.menu ul li:nth-last-child(1)
{
    border: 0 solid #333333;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

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

Link to text on tablet and phone

On my website, I have included a phone number in the HTML as text. When viewed on an iPad tablet, it automatically interprets the phone number and turns it into an underline blue link. Is there a way to format the phone number in a different style so it d ...

html css mobile hyperlink phone-number

Arranging divs - positioning them sequentially

Visualize a math problem presented on a website. I want to showcase the math problem and allow users to input their answer beside it. I am working on setting up the structure for this feature. I have unique buttons that will modify the text of the answer. ...

What is the best way to incorporate a company logo with its name into a website while also utilizing <h1> headings effectively?

As I design a fixed navigation for my website, it will feature a logo with the company name and an icon. Since the company name is already included in the logo itself, I am debating whether to use a header tag in my HTML. However, I do want search engine ...

The vertical alignment of an image within a colorbox is not functioning properly

I recently attempted to center an image vertically using the line-height property in the parent and the vertical-align property in the child element: <div style="height:500px; line-height:500px"> <img src="someimage.jpg" style="vertical-align:m ...

css vertical-alignment

Tips for Resizing and Reviving Divs with jQuery

I have recently ventured into the world of web development to assist a family member with their website. My knowledge and experience are limited, but I am facing an interesting challenge. I am trying to manipulate certain divs as users scroll down the page ...

javascript jquery html css

What could be causing my opacity rule to impact neighboring elements?

I have designed button images and I want the image's opacity to change when a user hovers over it while keeping other elements like span and h2 completely visible. Despite targeting only the img element in my CSS for hover effect, all elements' o ...

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

javascript jquery html css

The React MUI v5 Card's background features a subtle white hue with a 5% opacity, leaving me curious about its origin

I've noticed a strange styling issue in my code. It seems to be related to a class called .css-18bsee0-MuiPaper-root-MuiCard-root, possibly from MUI's Card or MUI's Paper components. However, I can't find it in my own code. While tryin ...

css reactjs material-ui

Dynamic and uniform height for a group of containers

Imagine three boxes lined up, each with an image and a title inside. I can adjust the height using the height property to make them all the same height. However, in a Responsive view, when the boxes shrink, their fixed height can cause extra white space to ...

jquery css html

Use CSS to zoom in on the background without any text overlays

I'm attempting to create a zoom effect on the background image only. The code snippet below shows a clickable element with an image background. However, when I apply the zoom effect, it also zooms in on the text within the div. Is there a way to isola ...

css background bootstrap-4 zooming

What's the best way to use CSS to center an HTML element on a page?

My goal is to perfectly center an HTML element on a page, ensuring that the center of the element aligns with the center of the page. The current code I am using is as follows: #associate { position:absolute; color:white; background-color:red; ...

"Can I align a div in the center using inline-block with an

Despite my efforts, I still can't figure this out. My apologies for the duplication. I attempted to use text-align: center, margin: 0 auto;, and display: flex;, but none of them worked as expected in the end. I apologize for the messy formatting. ...

Troubleshooting problem with spacing on three horizontal divs

I am currently working on building an E-commerce website to gain some practice. Here is how the div is set up: .small-container { max-width: 1080px; margin: 5px; padding-left: 25px; padding-right: 25px; } .col-4 { flex-basis: 25%; padding ...

The chat text will automatically scroll down, displaying information loaded from the database

Is there a way to ensure that chat text always remains scrolled to the bottom of the chat? I have tried multiple tutorials and examples from Stack Overflow, but none seem to work for me. Currently, my chat text overflows the textarea when there are too m ...

javascript jquery html css ajax

Automatically adjust image size to match viewport dimensions without cutting off edges

I am facing a CSS challenge. The issue is with an image that has dimensions of 1024x500 pixels. When the browser window size decreases below the width of the image (1024px), the image starts to get cropped on the sides. I have set the container width to 10 ...

css browser viewport image-resizing

"Exploring the concept of odd and even numbers within the ng-repeat

Can anyone help me with detecting odd or even numbers in an ng-repeat? I have created a fiddle that displays some dots randomly showing and hiding. Now, I want to change the background color so that odd numbers are green and even numbers are red. function ...

Clicking is not causing the Simple Modal to appear

I'm facing an issue with the modal on my website. Initially, it was working fine and showing up when I clicked the button. But now, for some reason (which I can't figure out), the modal box refuses to open. The layout of my page consists of an i ...

javascript html css simplemodal

Ensure that div elements in a container only occupy the required amount of space

I'm struggling to generate images with dashes in between them while ensuring that each div only occupies the necessary space within the container. However, my attempts so far have resulted in all the divs taking up an equal amount of space, which is n ...

html css flexbox

VS Code warning about unused CSS selectors in SvelteKit

Is there a way to get rid of the Unused CSS selector warning in VS Code? I keep getting this warning in all files where I use <style lang="scss">. While I'm aware that I don't use the .btn class in some components, I still want it ...

css visual-studio-code sass svelte sveltekit

Display a variety of images all in one slider page effortlessly with the ngb-carousel feature

I'm currently utilizing Angular 6 and ng-bootstrap to implement a carousel feature on my website. Although the carousel is functioning correctly, I am facing an issue where only one image is being displayed in each slide instead of four images per sl ...

javascript css carousel angular6 ng-bootstrap

CSSer Q&A