[Resolved] Trying to add border radius to bottom corners of last item in Sub menu.

[Alicia]

Hi!

I’m trying to do this but my CSS isn’t working and I can’t find the background colors in the Chrome Inspector.

Here’s my CSS:

.main-navigation ul ul,
.main-navigation .main-nav ul ul li:last-child:hover {
    border-radius: 0 0 5px 5px;
}

[Leo]

Hi there,

Not exactly sure what you are looking for but does this work?

.main-navigation .main-nav ul ul li:last-child a:hover {
    background-color: #000;
}

Let me know 🙂

[Alicia]

Hi!

I’m trying to retain the rounded corners on hover. Here are two images:

First, notice rounded corners at bottom of dropdown:

Rounded corners

And here when I hover on last item in nav, the background isn’t rounded.

Not rounded

[David]

Hi there

try this CSS instead:

.main-navigation ul ul {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
}

[Alicia]

That worked!

I modified it for my exact needs and this is the ticket:

.main-navigation ul ul,
.main-navigation .main-nav ul ul li:last-child:hover,
.main-navigation .main-nav ul ul li.current_page_item:last-child, .main-navigation .main-nav ul ul li.current-menu-item:last-child {
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}

The above code takes care of border radius in all scenarios!

Thanks!

[Leo]

No problem 🙂

[Author]

Posts