Archived topic
Border Bars to the left of Drop Down Items on Hover
5 replies · Started by Brian on August 15, 2017
Hey guys,
I am currently using this CSS to create a border animation underneath my primary navigation menu items (upon hover & for current page):
/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
color: #1e73be;
left: 50%;
bottom: 9px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 3px;
background-color: currentColor;
transition: .2s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 65%;
color: #1e73be;
}I would like to have a similar effect with the drop down menu items, only with those have the border show to the left. Messed around with it a bit, but not sure how to accomplish that. Any help appreciated.
Thanks!
Are you looking for an animated border on the left? Any examples?
Hey Tom,
I am hoping for it to look identical to my main menu items, but instead of being underneath, I need it to be to the left for when I am hovering or navigating to the drop down menu items. It really doesn't even need to be an animation, just for a border to show up when the mouse hovers.
Here's a link so you can see what I have so far:
https://stockbagger.com/
I unfortunately do not have any real world examples, it's just something I'm imagining in my head at the moment
Thank you!
Try this:
.main-navigation .sub-menu li a {
border-left: 2px solid transparent;
}
.main-navigation .sub-menu li a:hover {
border-left: 2px solid #1e73be;
}Tom,
That worked great.
Thank you very much!
You're welcome :)
