Background shape of CSS on hover

Question

I have a Bootstrap navigation like in the snippet below.

I have noticed different users just going to the heading and not actually going into the submenu to select products.

When I expand the products section and hover over the headings I want the orange background to be shaped like an arrow to try show people that they can go across. Something like this:

I tried messing around with shapes in pure CSS using the border as shown here https://css-tricks.com/the-shapes-of-css/ but cannot achieve what I am looking for.

 .navbar .dropdown-menu{ background-color:#eee; } .navbar .dropdown-submenu{ display:none; background-color:#ddd; position:absolute; top:0px; left:100%; } .navbar .dropdown-submenu .dropdown-item > a{ display:block; } .navbar .dropdown-menu > .dropdown-item > a{ display:block; } .navbar .dropdown-item:hover .dropdown-submenu{ display:block; } .navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover { background-color:#F8981D; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon"> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item text-center dropdown"> <a class="nav-link nav dropdown-toggle products-dropdown" href="#" data-toggle="dropdown" aria-expanded="true">Products</a> <ul class="dropdown-menu"> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#1">Heading1›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#2">Heading2›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#3">Heading3›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> </ul> </li> <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li> </ul> </div> </nav> 

Edit

 .navbar .dropdown-menu{ background-color:#eee; } .navbar .dropdown-submenu{ display:none; background-color:#ddd; position:absolute; top:0px; left:100%; } .navbar .dropdown-submenu .dropdown-item > a{ display:block; } .navbar .dropdown-menu > .dropdown-item > a{ display:block; } .navbar .dropdown-item:hover .dropdown-submenu{ display:block; } .navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover { background-color:orange; } .navbar .dropdown-menu > .dropdown-item{ width: 200px; height: 40px; position: relative; /* having this with relative positioning means my menu items are not aligned at the top the way they should be and I also don't want to give fixed widths or heights as the content is dynamic.*/ } .navbar .dropdown-menu > .dropdown-item:hover:before{ content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid orange; border-top: 20px solid transparent; border-bottom: 20px solid transparent; z-index:9999; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon"> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item text-center dropdown"> <a class="nav-link nav dropdown-toggle products-dropdown" href="#" data-toggle="dropdown" aria-expanded="true">Products</a> <ul class="dropdown-menu"> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#1">Heading1›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#2">Heading2›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#3">Heading3›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> </ul> </li> <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li> </ul> </div> </nav> 

Answer 1

Is this what you are trying to achieve?

 .navbar .dropdown-menu{ background-color:#eee; width: 100%; } .navbar .dropdown-submenu{ display:none; background-color:#ddd; position:absolute; top:0px; left:100%; } .navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu{ position: inherit; } .navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item{ transition: .5s ease width; width: 95%; } .navbar .dropdown-submenu .dropdown-item > a{ display:block; } .navbar .dropdown-menu > .dropdown-item > a{ display:block; } .navbar .dropdown-item:hover .dropdown-submenu{ display:block; } .navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover { background-color:#F8981D; width: 100%; } .navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover:after{ content: ""; position: relative; float: right; margin-top: -28px; left: 9%; bottom: 0; width: 0; height: 0; border-left: 13px solid #F8981D; border-top: 16px solid transparent; border-bottom: 16px solid transparent; z-index: 10; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon"> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item text-center dropdown"> <a class="nav-link nav dropdown-toggle products-dropdown" href="#" data-toggle="dropdown" aria-expanded="true">Products</a> <ul class="dropdown-menu"> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#1">Heading1›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#2">Heading2›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#3">Heading3›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> </ul> </li> <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li> </ul> </div> </nav> 

---

Explanation:

Basically the shape is copied from the link that you gave.

Then add transition: 1s ease all; to the main shape. And on :hover makes the elements width bigger.

Then you get this:

 .arrow{ width: 200px; height: 40px; position: relative; background: orange; transition: 1s ease all; line-height: 40px; padding: 0 24px; margin-top: 5px; } .arrow a{ text-decoration: none; color: black; } .arrow:before{ content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid orange; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .arrow:hover{ width: 250px; } .arrow:hover a{ color: red; font-size: 120%; } 

 <div class="arrow"><a href="#">Link 1</a></div> <div class="arrow"><a href="#">Link 2</a></div> <div class="arrow"><a href="#">Link 3</a></div> 

---

You could add:

If you want the arrow to only appear on hover, change .arrow:before{...} to .arrow:hover:before{...}

 .arrow{ width: 200px; height: 40px; position: relative; background: orange; transition: 1s ease all; line-height: 40px; padding: 0 24px; margin-top: 5px; } .arrow a{ text-decoration: none; color: black; } .arrow:hover:before{ content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid orange; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .arrow:hover{ width: 250px; } .arrow:hover a{ color: red; font-size: 120%; } 

 <div class="arrow"><a href="#">Link 1</a></div> <div class="arrow"><a href="#">Link 2</a></div> <div class="arrow"><a href="#">Link 3</a></div> 

---

Or add:

If you want the orange background to appear on hover as well. Add

.arrow:hover{
    background: orange;
}

And remove background: orange; from the .arrow{...} . Also change transition: 1s ease all; to transition: 1s ease width;

 .arrow{ width: 200px; height: 40px; position: relative; transition: 1s ease width; line-height: 40px; padding: 0 24px; margin-top: 5px; } .arrow:hover{ background: orange; } .arrow a{ text-decoration: none; color: black; } .arrow:hover:before{ content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid orange; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .arrow:hover{ width: 250px; } .arrow:hover a{ color: red; font-size: 120%; } 

 <div class="arrow"><a href="#">Link 1</a></div> <div class="arrow"><a href="#">Link 2</a></div> <div class="arrow"><a href="#">Link 3</a></div> 

Answer 2

You can use css clip-path to make shapes like this.

DEMO

 .navbar .dropdown-menu { background-color: #eee; } .navbar .dropdown-submenu { display: none; background-color: #ddd; position: absolute; top: 0px; left: 100%; } .navbar .dropdown-submenu .dropdown-item>a { display: block; } .navbar .dropdown-menu>.dropdown-item>a { display: block; padding: .25rem 1.5rem; } .navbar .dropdown-item:hover .dropdown-submenu { display: block; } .navbar .dropdown-menu>.dropdown-item { padding: 0; background-color: transparent; } .navbar .dropdown-menu>.dropdown-item a:focus, .navbar .dropdown-menu>.dropdown-item a:hover { background-color: #F8981D; clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 0 54%, 0% 0%); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon"> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item text-center dropdown"> <a class="nav-link nav dropdown-toggle products-dropdown" href="#" data-toggle="dropdown" aria-expanded="true">Products</a> <ul class="dropdown-menu"> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#1">Heading1›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#2">Heading2›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> <li class="dropdown-item d-block"> <a class="submenu-item" href="store#3">Heading3›</a> <ul class="dropdown-submenu"> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> <li class="dropdown-item d-block"><a href="#">Product</a></li> </ul> </li> </ul> </li> <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li> <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li> </ul> </div> </nav>