如何在 css 中的导航栏项下添加一个块

Question

I want to have a little block beneath the active page (and hover), in the navbar ofcourse. It should look like this:

This is the code that I have so far. I think that the border-bottom needs to be very small, with a big thickness.

.navbar .navbar-nav > li > a:hover {
color:#008080;
background:rgba(255,255,255, 0.0);
border-bottom: 5px solid rgb(255, 128, 0);

}

I hope someone can help with this.

Answer 1

So the best way I can see would be to make a div within the navbar li Something like:

 <div class="navbar"> <li>Home <div class="square"></div> </li>

And then give that div the styles of:

 .square { display:none; width:50%; margin:0 auto; background: orange; height:20px; } .square:hover { display:block; }

That should make it appear when you hover over the square itself. You might have to use a javascript mouseover events if you want to make it appear when you hover over the whole li tag

Does that help at all?