WP中的下拉菜單

當您將鼠標懸停在鏈接上時，我正在編輯此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 
}

來源

2017-08-27 kamiloo

它看起來像縮小工作得很好。 – Prajwal

爲什麼你需要改變一個菜單小部件的CSS來讓它工作？你確定你已經正確設置了部件嗎？你是否包含並調用所有的JavaScript？ – RickL

菜單小工具運行良好，但我需要更改一件事：現在菜單下降點擊，當鼠標懸停在鏈接上時，我想下拉菜單。有可能嗎？ – kamiloo

我不知道它會工作，因爲我們沒有HTML結構，但嘗試將此行添加到您的CSS：

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

來源

2017-08-27 10:50:36

太棒了！非常感謝，它的工作。 – kamiloo

WP中的下拉菜單

回答

相關問題