Archived topic

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

5 replies · Started by Alicia on December 20, 2019

Viewing posts 1–6 of 6

December 20, 2019 at 5:17 pm #1110169

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;
}

December 20, 2019 at 6:37 pm #1110191

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 :)

December 20, 2019 at 11:41 pm #1110289

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

December 21, 2019 at 3:01 am #1110365

Hi there

try this CSS instead:

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

December 22, 2019 at 2:53 pm #1111635

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!

December 22, 2019 at 4:37 pm #1111703

No problem :)

This archived topic is closed to new replies.

Start building better websites today.