Question

我想在我的主题中添加子菜单。但它现在出现了。我在我的网站上使用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'; 
  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>

Answer 1

HI现在习惯了

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

--- 在这里演示

＆＃13;

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;

}

＆＃13;

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

＆＃13;

Answer 2

你可以尝试这个：

<div>
    <textarea></textarea>
</div>

DEMO HERE

子菜单未显示。

2 个答案: