我实现了基于css形状的引导程序菜单，并且我在显示子菜单时遇到问题我认为这是因为我在形状div中有一个固定的div。
.menu {
width: 100%;
height: 40px;
background-color: blue;
-webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
position: relative;
}
.menu ul li {
font-family: 'Seravek';
font-size: 14px;
text-transform: uppercase;
}
.menu:before {
content: '';
width: 99.5%;
height: 38px;
-webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
background: grey;
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
height: 40px !important;
}
.navbar-default .navbar-collapse #menu-menuprincipal, .navbar-default .navbar-form #menu-menuprincipal {
height: 40px;
}
.navbar-default .navbar-collapse #menu-menuprincipal li, .navbar-default .navbar-form #menu-menuprincipal li {
height: 40px;
}
.navbar-default .navbar-collapse #menu-menuprincipal li a, .navbar-default .navbar-form #menu-menuprincipal li a {
padding-top: 0;
padding-bottom: 0;
line-height: 40px;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container-fluid no-padding">
<div class="row no-margin">
<div class="col-xs-4 col-sm-4 col-md-3 logo">
<div class="navbar-header">
<a class="navbar-brand" href="/site/">
<img alt="site" src="<?php bloginfo('template_url')?>/images/logo.png">
</a>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-9 no-padding">
<div class="menu-operations">
<div class="languages">
</div>
<div class="social">
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-9 no-padding">
<div class="navbar-header logo-vertical">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-9 no-padding">
<div class="menu">
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul id="menu-menuprincipal" class="nav navbar-nav navbar-right">
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a title="Empresa" href="">Empresa</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-37 dropdown"><a title="Produção" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Produção <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-38 active"><a title="Produção" href="">Produção</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Equipamentos" href="">Equipamentos</a></li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a title="Mercados" href="">Mercados</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30 dropdown"><a title="Qualidade e Ambiente" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Qualidade e Ambiente <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a title="Qualidade" href="">Qualidade</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a title="Ambiente" href="">Ambiente</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a title="Notícias" href="">Notícias</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a title="Contactos" href="">Contactos</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
我在wp_bootstrap_navwalker使用wordpress，代码是菜单类中的链接：
<div class="menu">
<?php
wp_nav_menu( array(
'menu' => 'menuPrincipal',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
答案 0 :(得分：0)
试试这个：
<?php
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu' => '',
'container' => 'nav',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav navbar-right',
'menu_id' => 'navigation',
'echo' => true,
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
)
);
} else {
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => '' ) );
}
?>
我只是根据您的数据调整我的设置。通常，您需要定义items_wrap以获得所需的结果。
并将container_id（wp_bootstrap_navwalker）更改为更自然的内容。
如果您遵循HTML5规则，也可以从SEO方面使用<nav>标记。这也遵循Bootstrap规则