子菜单不显示。 [英] Sub Menu is not showing up.

问题描述

我想在我的主题中添加子菜单。但它现在显示。我在我的网站上使用WordPress。

我不知道为什么CSS不工作。

请参阅下面的代码了解详情。

感谢您的帮助。

  header nav {position：absolute; top：92px; right：20px; } header nav ul {margin：0; padding：0; } header nav ul li {margin：0; padding：0; font：400 18px'PT Sans Narrow';颜色：＃6d6d6d; list-style：none;位置：相对; float：left; } header nav ul li a {padding：2px 12px 5px 12px; font：400 18px'PT Sans Narrow';颜色：＃6d6d6d;显示：block; text-decoration：none; } header nav ul li a：hover，header nav ul li.current-menu-item a，header nav li.current-page-ancestor a {background：＃202020; color：#ffffff; } header ul.sub-menu {height：auto; width：210px; text-align：left; position：absolute; left：0; z-index：9999; display：none;}头文件ul.sub-menu li {height：auto; width：210px; font：400 18px'PT Sans Narrow';颜色：＃6d6d6d;显示：block; float：none！important; position：relative！important;}头文件ul.sub-menu a {padding：2px 12px 5px 12px;背景：＃202020; color：#ffffff;显示：block; text-decoration：none; position：relative！important;}  

 < header> ; nav class =menu-primary-container>< ul id =menu-primaryclass =>< li id =menu-item-20class =menu-item menu-item -type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20>< a href =http://www.asbestosremovalprofessionals.com.au/ ; Home< / a>< / li>< li id =menu-item-19class =menu-item menu-item-type-post_type menu-item-object-page menu-item-19> ;< a href =http://www.asbestosremovalprofessionals.com.au/about-ab-asrem/>关于我们< / a>< / li>< li id =menu-item-69 class =menu-item menu-item-type-post_type menu-item-object-page menu-item-have-children menu-item- 69>< a href =http：//www.asbestosremovalprofessionals。 com.au/asbestos-testing-melbourne/\">石棉测试< / a>< ul class =sub-menu> < li id =menu-item-71class =menu-item menu-item-type-post_type menu-item-object-page menu-item-71>< a href =http：// www.asbestosremovalprofessionals.com.au/asbestos-roof-removal-cost/\">石棉屋顶< / a>< / li>< / ul>< / li>< li id =menu-item- 17class =menu-item menu-item-type-post_type menu-item-object-page menu-item-17>< a href =http://www.asbestosremovalprofessionals.com.au/testimonials/ >见证< / a>< / li>< li id =menu-item-16class =menu-item menu-item-type-post_type menu-item-object-page menu-item-16 >< a href =http://www.asbestosremovalprofessionals.com.au/contact/>联系< / a>< / li>< li id =menu-item-15class = menu-item menu-item-type-post_type menu-item-object-page menu-item-15>< a href =http://www.asbestosremovalprofessionals.com.au/blog/> Blog< ; / a>< / li>< / ul>< / nav>< / header>  

解决方案

HI现在用于此

  header nav ul> li：hover ul {display：block;} 
  

--- >

  header nav {position：absolute; top：92px; right：20px; } header nav ul> li：hover ul {display：block;} header nav ul {margin：0; padding：0; } header nav ul li {margin：0; padding：0; font：400 18px'PT Sans Narrow';颜色：＃6d6d6d; list-style：none;位置：相对; float：left; } header nav ul li a {padding：2px 12px 5px 12px; font：400 18px'PT Sans Narrow';颜色：＃6d6d6d;显示：block; text-decoration：none; } header nav ul li a：hover，header nav ul li.current-menu-item a，header nav li.current-page-ancestor a {background：＃202020; color：#ffffff; } header ul.sub-menu {height：auto; width：210px; text-align：left; position：absolute; left：0; z-index：9999; display：none;}头文件ul.sub-menu li {height：auto; width：210px; font：400 18px'PT Sans Narrow';颜色：＃6d6d6d;显示：block; float：none！important; position：relative！important;}头文件ul.sub-menu a {padding：2px 12px 5px 12px;背景：＃202020; color：#ffffff;显示：block; text-decoration：none; position：relative！important;}  

 < header> ; nav class =menu-primary-container>< ul id =menu-primaryclass =>< li id =menu-item-20class =menu-item menu-item -type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20>< a href =http://www.asbestosremovalprofessionals.com.au/ ; Home< / a>< / li>< li id =menu-item-19class =menu-item menu-item-type-post_type menu-item-object-page menu-item-19> ;< a href =http://www.asbestosremovalprofessionals.com.au/about-ab-asrem/>关于我们< / a>< / li>< li id =menu-item-69 class =menu-item menu-item-type-post_type menu-item-object-page menu-item-have-children menu-item- 69>< a href =http：//www.asbestosremovalprofessionals。 com.au/asbestos-testing-melbourne/\">石棉测试< / a>< ul class =sub-menu> < li id =menu-item-71class =menu-item menu-item-type-post_type menu-item-object-page menu-item-71>< a href =http：// www.asbestosremovalprofessionals.com.au/asbestos-roof-removal-cost/\">石棉屋顶< / a>< / li>< / ul>< / li>< li id =menu-item- 17class =menu-item menu-item-type-post_type menu-item-object-page menu-item-17>< a href =http://www.asbestosremovalprofessionals.com.au/testimonials/ >见证< / a>< / li>< li id =menu-item-16class =menu-item menu-item-type-post_type menu-item-object-page menu-item-16 >< a href =http://www.asbestosremovalprofessionals.com.au/contact/>联系< / a>< / li>< li id =menu-item-15class = menu-item menu-item-type-post_type menu-item-object-page menu-item-15>< a href =http://www.asbestosremovalprofessionals.com.au/blog/> Blog< ; / a>< / li>< / ul>< / nav>< / header>  

I am trying to add the sub menu in my theme. But it's now showing up. I am using WordPress on my website.

I don't know why the CSS is not working.

Please see the code below for details.

Thanks for the help.

header nav { 
  
  position: absolute; 
  top: 92px; 
  right: 20px; 
}

header nav ul { 
  
  margin: 0; 
  padding: 0; 

}

header nav ul li { 
  
  margin: 0; 
  padding: 0; 
  font: 400 18px 'PT Sans Narrow'; 
  color: #6d6d6d; 
  list-style: none; 
  position: relative; 
  float: left; 
}

header nav ul li a { 
  
  padding: 2px 12px 5px 12px; 
  font: 400 18px 'PT Sans Narrow'; 
  color: #6d6d6d; 
  display: block; 
  text-decoration: none; 
}

header nav ul li a:hover, header nav ul li.current-menu-item a, header nav li.current-page-ancestor a { 
  
  background: #202020; 
  color: #ffffff; 
}

header ul.sub-menu { 
  
  height: auto; 
  width: 210px; 
  text-align: left; 
  position: absolute; 
  left: 0;z-index: 9999;
  display: none;

}

header ul.sub-menu li { 
  
  height: auto; 
  width: 210px; 
  font: 400 18px 'PT Sans Narrow'; 
  color: #6d6d6d; 
  display: block; 
  float: none !important;
  position: relative !important;

}

header ul.sub-menu a { 
  
  padding: 2px 12px 5px 12px; 
  background: #202020; 
  color: #ffffff;
  display: block; 
  text-decoration: none;
  position: relative !important;

}

<header>
<nav class="menu-primary-container"><ul id="menu-primary" class=""><li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20"><a href="http://www.asbestosremovalprofessionals.com.au/">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://www.asbestosremovalprofessionals.com.au/about-ab-asrem/">About Us</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-69"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-testing-melbourne/">Asbestos Testing</a>
<ul class="sub-menu">
	<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-roof-removal-cost/">Asbestos Roofing</a></li>
</ul>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.asbestosremovalprofessionals.com.au/testimonials/">Testimonials</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.asbestosremovalprofessionals.com.au/contact/">Contact</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.asbestosremovalprofessionals.com.au/blog/">Blog</a></li>
</ul></nav></header>

解决方案

HI now used to this

header nav ul > li:hover ul{display:block;}

--- Demo here

header nav { 
  
  position: absolute; 
  top: 92px; 
  right: 20px; 
}
header nav ul > li:hover ul{display:block;}
header nav ul { 
  
  margin: 0; 
  padding: 0; 

}

header nav ul li { 
  
  margin: 0; 
  padding: 0; 
  font: 400 18px 'PT Sans Narrow'; 
  color: #6d6d6d; 
  list-style: none; 
  position: relative; 
  float: left; 
}

header nav ul li a { 
  
  padding: 2px 12px 5px 12px; 
  font: 400 18px 'PT Sans Narrow'; 
  color: #6d6d6d; 
  display: block; 
  text-decoration: none; 
}

header nav ul li a:hover, header nav ul li.current-menu-item a, header nav li.current-page-ancestor a { 
  
  background: #202020; 
  color: #ffffff; 
}

header ul.sub-menu { 
  
  height: auto; 
  width: 210px; 
  text-align: left; 
  position: absolute; 
  left: 0;z-index: 9999;
  display: none;

}

header ul.sub-menu li { 
  
  height: auto; 
  width: 210px; 
  font: 400 18px 'PT Sans Narrow'; 
  color: #6d6d6d; 
  display: block; 
  float: none !important;
  position: relative !important;

}

header ul.sub-menu a { 
  
  padding: 2px 12px 5px 12px; 
  background: #202020; 
  color: #ffffff;
  display: block; 
  text-decoration: none;
  position: relative !important;

}

<header>
<nav class="menu-primary-container"><ul id="menu-primary" class=""><li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20"><a href="http://www.asbestosremovalprofessionals.com.au/">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://www.asbestosremovalprofessionals.com.au/about-ab-asrem/">About Us</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-69"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-testing-melbourne/">Asbestos Testing</a>
<ul class="sub-menu">
	<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-roof-removal-cost/">Asbestos Roofing</a></li>
</ul>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.asbestosremovalprofessionals.com.au/testimonials/">Testimonials</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.asbestosremovalprofessionals.com.au/contact/">Contact</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.asbestosremovalprofessionals.com.au/blog/">Blog</a></li>
</ul></nav></header>

这篇关于子菜单不显示。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！