Question

我创建了一个自己的WordPress主题，我遇到了一个问题：

我有border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px的导航;每当我悬停导航时，我真的想放border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px;，但我看不到任何结果。

我已经尝试了不同的东西，但似乎我无法确定如何解决这个问题。

这是我的Fiddle link

Answer 1

以下是JSFiddle

中的演示

#cssmenu ul li:hover {
    border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px !important;
}

添加此代码，您将获得所需的结果。

Answer 2

改变这个：

#cssmenu ul li:hover,
#cssmenu ul li.active {
  background: #2d78b2;

  /* Old browsers */


}

用这个：

   #cssmenu ul li:hover:nth-child(1),
#cssmenu ul li.active {
background: #2d78b2;
border-radius: 8px 0px 0px 8px !important;
  /* Old browsers */


}

#cssmenu ul li:hover,
#cssmenu ul li.active {
  background: #2d78b2;
border-radius: 0px 0px 0px 0px;
  /* Old browsers */


}

http://jsfiddle.net/TJe8w/2/

Answer 3

您在li上缺少边框半径。这是您需要更新的CSS。

#cssmenu ul li{border-radius: 8px;}

您可以在此fiddle

中查看

修复悬停到导航菜单

3 个答案: