Home / Questions / 218659
Accepted
Diego Ulloa
Asked: 2020-12-02 00:22:38 +0800 CST 2020-12-02 00:22:38 +0800 CST

Aid! hover effect in sub-menu (html css)

  • 772

I am designing a site. I used an existing menu which I gave support for sub-menus. It's perfect, it's just that I have a problem with the hover effect (lower bar) in the submenu.

I have not been able to make the bottom bar only span the width of the text (element "a") and not the width of the entire container (element "li"). I am using bootstrap.

This graphs the output I'm trying to get:

example of the result I am trying to achieve

I have the code working in codepen so you can see and edit it live here: https://codepen.io/diego-ulloa/pen/xQMVza

I would appreciate help as I haven't been able to do it.

Thank you very much!!

html

1 Answers

  1. Best Answer

    To the element ".dropdown-item" you should give "display: inline-block". The problem is that if more than one submenu item goes into a line, it will be like this... so "dropdown-menu" would pass it to flexbox in column. Here is the code in case you have any doubts:

    .dropdown-menu { display: flex; flex-direction: column; align-items: center; }

    Adding that to the css should work.

    • 0