添加第二个悬停选择器

Question

您好我已经创建了一个菜单。添加了一个活动类，因此当用户单击菜单图标时，它会突出显示该页面链接到的“LI”。

我已经在您登录前调用了悬停选择器。已添加UL的背景颜色。

我的问题是，我是否可以在登录时更改第二个悬停选择器并更改UL的背景，而不会更改用户登录前设置的属性。

我可以在不添加其他css类的情况下执行此操作。像:: before或:: after或.active：hover之类的东西。那会诀窍吗？

WHILE @runningstock>=0
BEGIN
    INSERT INTO @RESULT(priority,partcode,orderqty,runningstock,allocateqty)
    SELECT priority,
           partcode, 
           orderqty,
           @runningstock,
           CASE WHEN @runningstock > 0 AND orderqty > 0 THEN 1 ELSE 0 END
    FROM @ORDER

    SET @runningstock =@runningstock-1
 END

JsFiddle Demo

摘录演示：

.menuColumn #nav ul li a.active {
  background: #029EF1;
  box-shadow: 0px 3px 0px #0175B2;
  color: #FFF;
}
.menuColumn #nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #E6E7E9;
}

 .example1 {
   width: 20%;
 }
 .example1 #nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   background: #E6E7E9;
 }
 .example1 #nav ul li {
   list-style: none;
   display: block;
   position: relative;
   text-align: left;
   border-bottom: 1px solid #CDCED0;
 }
 .example1 #nav ul li:last-child {
   border-bottom: none;
 }
 .example1 #nav ul li a {
   text-decoration: none;
   color: #7E7F81;
   line-height: 3em;
   display: block;
   padding-left: 15‌​px;
   font-weight: bold;
 }
 .example1 #nav ul li a:hover {
   background: #7E7F81;
   color: #FFF;
   box-shadow: 0px 3px 0px #DBDCDD;
 }
 .example1 #nav ul li a.active {
   background: #029EF1;
   box-shadow: 0px 3px 0px #0175B2;
   color: #FFF;
 }
 .example1 #nav ul li a:not(.active) {
   background: #000;
   box-shadow: 0px 3px 0px #0175B2;
   color: #FFF;
 }