下拉選單在WordPress中不起作用-有解無憂

我在帶有 CSS/HTML 的 WordPress 網站中使用下拉選單，但它無法正常作業。我已經嘗試了幾個小時，但它看起來仍然壞了。

.navbar-nav.ml-auto.menu_item {
    margin-top: 20px;
}

.navbar-nav {
    overflow: hidden;
}

.navbar-nav a {
    text-decoration: none;
    text-align: center;
    padding: 10px 12px;
}

.sub-menu {
  list-style: inherit;
  margin: 0;
  padding-left: 0;

}

.sub-menu a {
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
}

.sub-menu li {
  text-decoration: none;
  display: block;
  text-align: left;
}

.sub-menu li:hover {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
}




.navbar-nav a:hover, .sub-menu:hover .sub-menu {
  background-color: #FBAF1B;
}

.menu-main-menu {
    
}

.menu_item a {
    font-size: 18px !important;
    font-weight: 900;
    color: #031229 !important;
    text-transform: uppercase;
    display: inline-block;
}

            <div class="navbar-nav ml-auto menu_item">
      <ul class="navbar-nav">
      
             <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-212" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-212"><a href="https://www.solexcel.com.au/about/">About</a></li>
<li id="menu-item-3766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3766"><a href="https://www.solexcel.com.au/service-areas/">Service Areas</a></li>
<li id="menu-item-4053" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4053"><a href="#">Products</a>
<ul class="sub-menu">
    <li id="menu-item-4151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4151"><a href="https://www.solexcel.com.au/panels/">Panels</a></li>
    <li id="menu-item-4150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4150"><a href="https://www.solexcel.com.au/inverters/">INVERTERS</a></li>
    <li id="menu-item-4152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4152"><a href="https://www.solexcel.com.au/power-saving-unit/">Power Saving Unit</a></li>
</ul>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="https://www.solexcel.com.au/blogs/">Blogs</a></li>
<li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="https://www.solexcel.com.au/est-solar-inverter-in-melbourne-victoria-australia/">Contact</a></li>
</ul></div>       
<a href="https://www.solexcel.com.au/#quot" class="nav-item1 nav-link get_ww">Get </br>Started</a>

之前它運行良好，但突然我們從備份中恢復了網站。這就是為什么我們在這個主選單上遇到了一些問題。這些鏈接是指向網站的實時鏈接，因此您也可以訪問和查看實時網站。

請有人幫忙修改選單。我已經深入到 CSS 中，我們只是在恢復網站時丟失了一些代碼。

uj5u.com熱心網友回復：

您缺少隱藏和顯示的機制.sub-menu
這是一個簡單的示例，它將在懸停時顯示和隱藏子選單（我尚未測驗這是否適用于多個嵌套元素）。

.navbar-nav.ml-auto.menu_item {
    margin-top: 20px;
}

/*.navbar-nav { 
    overflow: hidden;
}*/

.navbar-nav a {
    text-decoration: none;
    text-align: center;
    padding: 10px 12px;
}

/* START added */

.navbar-nav .menu-item-has-children {
  position: relative;
}

.navbar-nav .menu-item-has-children > .sub-menu {
  display: none;
}

.navbar-nav .menu-item-has-children:hover > .sub-menu {
  display: block;
  z-index: 1;
}

/* END added */

.sub-menu {
  list-style: inherit;
  margin: 0;
  padding-left: 0;
  position: absolute;
  background-color: #ffffff;

}

.sub-menu a {
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
}

.sub-menu li {
  text-decoration: none;
  display: block;
  text-align: left;
}

.sub-menu li:hover {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
}




.navbar-nav a:hover, .sub-menu:hover .sub-menu {
  background-color: #FBAF1B;
}

.menu-main-menu {
    
}

.menu_item a {
    font-size: 18px !important;
    font-weight: 900;
    color: #031229 !important;
    text-transform: uppercase;
    display: inline-block;
}

<div class="navbar-nav ml-auto menu_item">
    <nav class="navbar-nav">
        <div class="menu-main-menu-container">
            <ul id="menu-main-menu" class="menu">
                <li id="menu-item-212" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-212"><a href="https://www.solexcel.com.au/about/">About</a></li>
                <li id="menu-item-3766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3766"><a href="https://www.solexcel.com.au/service-areas/">Service Areas</a></li>
                <li id="menu-item-4053" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4053"><a href="#">Products</a>
                    <ul class="sub-menu">
                        <li id="menu-item-4151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4151"><a href="https://www.solexcel.com.au/panels/">Panels</a></li>
                        <li id="menu-item-4150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4150"><a href="https://www.solexcel.com.au/inverters/">INVERTERS</a></li>
                        <li id="menu-item-4152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4152"><a href="https://www.solexcel.com.au/power-saving-unit/">Power Saving Unit</a></li>
                    </ul>
                </li>
                <li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="https://www.solexcel.com.au/blogs/">Blogs</a></li>
                <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="https://www.solexcel.com.au/est-solar-inverter-in-melbourne-victoria-australia/">Contact</a></li>
            </ul>
        </div>
        <a href="https://www.solexcel.com.au/#quot" class="nav-item1 nav-link get_ww">Get <br>Started</a>
    </nav>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/362872.html

標籤：html css WordPress的

上一篇：從多個類中獲取值

下一篇：通過CSS將背景影像轉換為行內樣式？