0
當您將鼠標懸停在鏈接上時,我正在編輯此CSS以創建一個下拉菜單。嘗試使用:懸停並將顯示更改爲無,但不具有此效果。 這是WP的「簡單的邊欄菜單小工具」,但我沒有太多的經驗。 請給我建議。WP中的下拉菜單
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
}
它看起來像縮小工作得很好。 – Prajwal
爲什麼你需要改變一個菜單小部件的CSS來讓它工作?你確定你已經正確設置了部件嗎?你是否包含並調用所有的JavaScript? – RickL
菜單小工具運行良好,但我需要更改一件事:現在菜單下降點擊,當鼠標懸停在鏈接上時,我想下拉菜單。有可能嗎? – kamiloo