我试图添加基于悬停动作显示在左侧的垂直线（此功能已存在于未折叠的菜单项中，就像scaleX（0）和scaleX（1）之间的过渡一样。状态）。我希望这些行发生在未折叠下拉菜单项的下拉菜单项和sm和xs屏幕的折叠菜单项上。看看我现在拥有的东西。我试图使用：之前和使用scaleY的背景颜色来消除此效果，但事实证明这很困难。非常感谢任何帮助。
/* navbar */
.navbar-default {
background-color: #FFFFFF;
border-bottom: 1px solid #777;
}
/* title */
.navbar-default .navbar-brand {
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
}
/* link */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
position: relative;
font-weight: bold;
color: #777;
}
.navbar-default .navbar-nav > li > a:before {
background-color: #1C86EE;
content: "";
height: 3px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-default .navbar-nav > li > a:hover:before,
.navbar-default .navbar-nav > li > a:focus:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar-default .navbar-nav > li > a.active:before{
background-color: #FFA500;
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar-default .navbar-nav > .open > a {
color: #777;
font-weight: bold;
background-color: #FFFFFF;
}
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #FFFFFF;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.dropdown-menu > li > a {
color: #777;
font-weight: bold;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
color: #777;
font-weight: bold;
}
.dropdown-menu > li > a.active {
color: #777;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">Brand</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><span class="vertical-line"></span>Action</a></li>
<li><a href="#"><span class="vertical-line"/>Another action</a></li>
<li><a href="#"><span class="vertical-line"/>Something else here</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
<script>
$(document).ready(function () {
$('ul.nav > li > a').click(function (e) {
e.preventDefault();
$('ul.nav > li > a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</html>
</body>
<script>
$(document).ready(function () {
$('ul.nav > li > a').click(function (e) {
e.preventDefault();
$('ul.nav > li > a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</html>