Wordpress Nav - 带下拉菜单的水平导航

Question

我尝试使用wordpress中的下拉菜单创建水平导航。

这是我尝试使用wordpress nav创建的代码：

＆＃13;

＆＃13;

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我对PHP的看法是：

<?php $defaults = array( 

 'container_class' => 'dropdown', 
 'container_id'    => '',
 'container'       => '',
 'menu_class'      => 'dropbtn', 
 'menu_id'         => '',
 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',

); ?>
<?php wp_nav_menu( $defaults ); ?>

它提出的是：

＆＃13;

＆＃13;

<ul class="dropbtn" id="menu-desktop-menu">
  <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-311" id="menu-item-311"><a href="link">Home</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-266" id="menu-item-266"><a href="link">Name</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276" id="menu-item-276"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274" id="menu-item-274"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275" id="menu-item-275"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271" id="menu-item-271"><a href="link">Name</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-270" id="menu-item-270"><a href="link">Name</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277" id="menu-item-277"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272" id="menu-item-272"><a href="link">Name</a></li>
</ul>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

它没有得到我想要的东西。我已经尝试了其他几件事，但我真的很困惑我需要改变才能使这项工作成功。有人能帮助我吗？

Answer 1

这是悬停时的简单下拉菜单

＆＃13;

＆＃13;

.dropbtn > li {
position: relative;
display: block;
height: 40px;
padding: 0 20px;
float: left;
}

.dropbtn .sub-menu {
position: absolute;
top: 100%;
left: 50%;
display: none;
width: 150px;
margin-left: -75px;
padding: 10px;
background-color: #f0f0f0;
}

.dropbtn .sub-menu li {
display: block;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px dotted #d0d0d0;
}

.dropbtn > li:hover .sub-menu {
display: block;
}

＆＃13;

<ul class="dropbtn" id="menu-desktop-menu">
  <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-311" id="menu-item-311"><a href="link">Home</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-266" id="menu-item-266"><a href="link">Name</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276" id="menu-item-276"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274" id="menu-item-274"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275" id="menu-item-275"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271" id="menu-item-271"><a href="link">Name</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-270" id="menu-item-270"><a href="link">Name</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277" id="menu-item-277"><a href="link">Name</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272" id="menu-item-272"><a href="link">Name</a></li>
</ul>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;