WP 中的 CSS 下拉菜单

Question

当您将鼠标悬停在链接上时，我正在尝试编辑此 css 以制作下拉菜单。尝试使用 :hover 并将显示更改为无，但没有这种效果。 它是 WP 的“Easy Sidebar Menu Widget”，但我对此没有太多经验。 请给我建议。

CSS:

@font-face{
  font-family:'widget_easy_sidebar_menu_widget';
  src:url("../fonts/fontello.eot?35265427");
  src:url("../fonts/fontello.eot?35265427#iefix") format("embedded-opentype"),url("../fonts/fontello.woff2?35265427") format("woff2"),url("../fonts/fontello.woff?35265427") format("woff"),url("../fonts/fontello.ttf?35265427") format("truetype"),url("../fonts/fontello.svg?35265427#fontello") format("svg");
  font-weight:normal;font-style:normal
}
.widget_easy_sidebar_menu_widget ul{
  list-style-type:none
}
.widget_easy_sidebar_menu_widget .current-menu-item>span>a,.widget_easy_sidebar_menu_widget .current-menu-ancestor>span>a{
  font-weight:700
}
.widget_easy_sidebar_menu_widget li.menu-item{
  position:relative;
  margin-top:0px;
  margin-bottom:0px;
  padding:0px;
  border-bottom:0px solid #eee;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}
.widget_easy_sidebar_menu_widget li.menu-item .link__wrap{
  position:relative;
  display:block
}
.widget_easy_sidebar_menu_widget li.menu-item a{
  display:block;
  padding:8px 0px;
  width:100%;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin-left: -30px;
}
.widget_easy_sidebar_menu_widget li.menu-item a .nav_desc{
  display:block;
  color:#777
}
.widget_easy_sidebar_menu_widget li.menu-item .easy-sidebar-menu-widget-toggler{
  position:absolute;
  padding:0px;
  margin:0px;
  top:2px;
  right:0px;
  width:34px;
  height:34px;
  border:1px solid transparent;
  text-align:center;
  outline:none;
  font-size:12px;
}
.widget_easy_sidebar_menu_widget li.menu-item .easy-sidebar-menu-widget-toggler i{
  font-family:"widget_easy_sidebar_menu_widget";
  font-style:normal;
  font-weight:normal;
  speak:none;color:#555;
  text-decoration:inherit;
  width:100%;
  height:100%;
  line-height:34px;
  display:block;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
.widget_easy_sidebar_menu_widget li.menu-item .easy-sidebar-menu-widget-toggler i:before{
  content:'\e800'
}
.widget_easy_sidebar_menu_widget li.menu-item .easy-sidebar-menu-widget-toggler.toggle__open i:before{
  content:'\e801'
}
.widget_easy_sidebar_menu_widget li.menu-item .easy-sidebar-menu-widget-toggler,.widget_easy_sidebar_menu_widget li.menu-item .easy-sidebar-menu-widget-toggler:focus{
  background:rgba(239,239,239,0.4);
  border:1px solid #eee
}
.widget_easy_sidebar_menu_widget li.menu-item.menu-item-has-children .easy-sidebar-menu-widget-link{
  padding-right:40px
}
.widget_easy_sidebar_menu_widget li.menu-item .sub-menu{
  display:none;
  position:relative;
  margin-left: -25px
}
.widget_easy_sidebar_menu_widget li.menu-item .sub-menu li:first-child{
  border-top:0px solid #eee
}
.widget_easy_sidebar_menu_widget li.menu-item .sub-menu li:first-child:before{
  content:'';
  position:absolute;
  left:-8px;
  top:-8px;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:8px solid #eee
}
.widget_easy_sidebar_menu_widget li.menu-item .sub-menu li:last-child{
  border-bottom:0px
}

Answer 1

我不确定它是否有效，因为我们没有 html 结构，但请尝试将此行添加到您的 css:

.widget_easy_sidebar_menu_widget li.menu-item:hover .sub-menu {
  display: block;
}