मैं सीएसएस/एचटीएमएल के साथ एक वर्डप्रेस वेबसाइट में ड्रॉपडाउन मेनू का उपयोग कर रहा हूं लेकिन यह ठीक से काम नहीं कर रहा है। मैंने घंटों कोशिश की है लेकिन यह अभी भी टूटा हुआ दिखता है।

.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>

यह पहले ठीक काम कर रहा था लेकिन अचानक हमने वेबसाइट को बैकअप से पुनर्स्थापित कर दिया। यही कारण है कि हम इस मुख्य मेनू के साथ कुछ समस्याओं का सामना कर रहे हैं। लिंक वेबसाइट के लिए लाइव हैं ताकि आप लाइव वेबसाइट पर भी जा सकें और देख सकें।

कृपया, कोई, मेनू को ठीक करने में मदद करें। मैंने सीएसएस में टक किया है जहां हम वेबसाइट को पुनर्स्थापित करते समय कुछ कोड खो देते हैं।

0
Muhammad Nouman Khalid 22 नवम्बर 2021, 09:48

1 उत्तर

सबसे बढ़िया उत्तर

आप अपने .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>
1
ciekals11 22 नवम्बर 2021, 10:46
धन्यवाद का बंडल, यह ठीक काम कर रहा है
 – 
Muhammad Nouman Khalid
22 नवम्बर 2021, 11:07
आप अपना प्रश्न हटाने पर विचार कर सकते हैं। मुझे संदेह है कि किसी और को भी इसी तरह की समस्या नहीं होगी। आपका बहुत विशिष्ट है और अन्य मामलों में ज्यादा मदद नहीं करेगा (यह अभी भी आप पर निर्भर है)।
 – 
ciekals11
22 नवम्बर 2021, 11:52