CODEWITHSUNDEEP
htmlmenuhtml-listscss
Andres
Andres

Reputation: 2023

can't set rounded borders on tooltip menu

I am working with a menu tutorial found here and everything works fine except i would like border corners. I've tried setting them everywhere possible but nothing works. any ideas on where it should work?

I've tried:

.cbp-tm-show .cbp-tm-submenu{
   border-radius: 5px;
}

also:

.cbp-tm-show-below .cbp-tm-submenu{ border-radius: 5px; }

every possible place i've tried it and haven't seen any effect.. :(

Upvotes: 0

Views: 109

Answers (2)

Rob Kovacs
Rob Kovacs

Reputation: 1087

As @Dean Stalker mentions, you need to set a background color on the submenu's ul element. You also need to set padding or a border width > 0 to that same ul in order for border-radius to have something to "round off".

The below assumes the background color of the submenus is white, like in the demo you linked to:

.cbp-tm-submenu {
    border: 5px solid #fff;
    background-color: #fff;
    border-radius: 5px;
}

Upvotes: 1

Dean Stalker
Dean Stalker

Reputation: 16

@Andres Try setting a background color on the ul element (.cbp-tm-show .cbp-tm-submenu). At the moment the background color is set to transparent (in the demo).

Upvotes: 0

Related Questions