wordpress菜单调用
<!-- main nav -->
<?php wp_nav_menu(array('theme_location'=>'main')) ?>
最终解析出来的HTML代码
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-478" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-478"><a href="https://www.XXX.com/">Home</a></li>
<li id="menu-item-482" class="menu-item menu-item-type-post_type_archive menu-item-object-product current-menu-ancestor menu-item-has-children menu-item-482"><a href="https://www.XXX.com/product/">Products</a>
<ul class="sub-menu" style="display: none; height: 615px; padding-top: 18px; margin-top: 0px; padding-bottom: 18px; margin-bottom: 0px;">
<div class="container clearfix"><li id="menu-item-8444" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-has-children menu-item-8444"><a href="https://www.XXX.com/pro-cat/conveying-and-bale-handling/">Conveying and Bale Handling</a>
<ul class="sub-menu">
<li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2257"><a href="https://www.XXX.com/product/chainconveyor/">Slat Conveyor</a></li>
<li id="menu-item-2289" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2289"><a href="https://www.XXX.com/product/bale-breaker/">Bale Breaker</a></li>
<li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2258"><a href="https://www.XXX.com/product/roll-conveyor/">Roll Conveyor</a></li>
<li id="menu-item-2259" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2259"><a href="https://www.XXX.com/product/leveling-wheel/">Leveling Wheel</a></li>
</ul>
</li><li id="menu-item-8447" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-has-children menu-item-8447"><a href="https://www.XXX.com/pro-cat/pulping/">Pulping</a>
<ul class="sub-menu">
<li id="menu-item-1222" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1222"><a href="https://www.XXX.com/product/drum-pulper/">Drum Pulper</a></li>
<li id="menu-item-2270" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2270"><a href="https://www.XXX.com/product/d-pulper/">D-type Pulper</a></li>
<li id="menu-item-2268" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2268"><a href="https://www.XXX.com/product/high-consistency-pulper/">High Consistency Pulper</a></li>
<li id="menu-item-2269" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2269"><a href="https://www.XXX.com/product/mid-consistency-pulper/">Mid Consistency Pulper</a></li>
<li id="menu-item-7820" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-7820"><a href="https://www.XXX.com/product/broke-pulper/">Broke Pulper</a></li>
</ul>
</li><li id="menu-item-8445" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-has-children menu-item-8445"><a href="https://www.XXX.com/pro-cat/detrashing/">Detrashing</a>
<ul class="sub-menu">
<li id="menu-item-8453" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-8453"><a href="https://www.XXX.com/product/impurity-separator/">Detrasher</a></li>
</ul>
</li><li id="menu-item-8450" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-has-children menu-item-8450"><a href="https://www.XXX.com/pro-cat/screening-equipment/">Screening</a>
<ul class="sub-menu">
<li id="menu-item-2276" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2276"><a href="https://www.XXX.com/product/inflow-pressure-screen/">Head Box Screen</a></li>
<li id="menu-item-2279" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2279"><a href="https://www.XXX.com/product/mid-consistency-screen/">MC Screen</a></li>
<li id="menu-item-2277" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2277"><a href="https://www.XXX.com/product/superscreen/">Super Screen</a></li>
<li id="menu-item-2400" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2400"><a href="https://www.XXX.com/product/fine-reject-screen/">Fine Reject Screen</a></li>
<li id="menu-item-7819" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-7819"><a href="https://www.XXX.com/product/drum-screen/">Drum Screen</a></li>
</ul>
</li><li id="menu-item-8443" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-has-children menu-item-8443"><a href="https://www.XXX.com/pro-cat/cleaning/">Cleaning</a>
<ul class="sub-menu">
<li id="menu-item-8454" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-8454"><a href="https://www.XXX.com/product/hd-cleaner/">HD Cleaner</a></li>
<li id="menu-item-8456" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-8456"><a href="https://www.XXX.com/product/light-lmpurity-cleaner-low-density/">LC Cleaner</a></li>
<li id="menu-item-8455" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-8455"><a href="https://www.XXX.com/product/reverse-cleaner/">Reverse Cleaner</a></li>
</ul>
</li><li id="menu-item-8448" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat current-product-ancestor current-menu-ancestor current-menu-parent current-product-parent menu-item-has-children menu-item-8448"><a href="https://www.XXX.com/pro-cat/refining-and-deflaking/">Refining and Deflaking</a>
<ul class="sub-menu">
<li id="menu-item-4575" class="menu-item menu-item-type-post_type menu-item-object-product current-menu-item menu-item-4575"><a href="https://www.XXX.com/product/high-consistency-refiner/" aria-current="page">High Consistency Refiner</a></li>
<li id="menu-item-2290" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2290"><a href="https://www.XXX.com/product/double-disc-refiner/">Double Disc Refiner</a></li>
<li id="menu-item-7821" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-7821"><a href="https://www.XXX.com/product/fiberdeflaker/">Fiber Deflaker</a></li>
</ul>
</li><li id="menu-item-8451" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-has-children menu-item-8451"><a href="https://www.XXX.com/pro-cat/thickening/">Thickening</a>
<ul class="sub-menu">
<li id="menu-item-2285" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-2285"><a href="https://www.XXX.com/product/discthickener/">Disc Thickener</a></li>
</ul>
</li><li id="menu-item-8442" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-has-children menu-item-8442"><a href="https://www.XXX.com/pro-cat/agitator/">Agitator</a>
<ul class="sub-menu">
<li id="menu-item-8457" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-8457"><a href="https://www.XXX.com/product/agitator/">Agitator</a></li>
</ul>
</li><li id="menu-item-7815" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat current-menu-ancestor current-menu-parent menu-item-has-children menu-item-7815"><a href="https://www.XXX.com/pro-cat/i-ctmp/">i-CTMP</a>
<ul class="sub-menu">
<li id="menu-item-7345" class="menu-item menu-item-type-post_type menu-item-object-product current-menu-item menu-item-7345"><a href="https://www.XXX.com/product/high-consistency-refiner/" aria-current="page">Thermal Shredder(Refiner)</a></li>
<li id="menu-item-7103" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-7103"><a href="https://www.XXX.com/product/chip-pre-steaming-bin/">Chip Pre-steaming Bin</a></li>
<li id="menu-item-7101" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-7101"><a href="https://www.XXX.com/product/plug-screw-feeder/">Plug Screw Feeder</a></li>
<li id="menu-item-7116" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-7116"><a href="https://www.XXX.com/product/side-entry-plug-feeder/">Side Feeding Screw</a></li>
</ul>
</li><li id="menu-item-8449" class="menu-item menu-item-type-taxonomy menu-item-object-pro-cat menu-item-8449"><a href="https://www.XXX.com/pro-cat/reject-handling/">Reject Handling</a></li></div>
</ul>
</li>
<li id="menu-item-6485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6485"><a href="/solutions">Solutions</a>
<ul class="sub-menu">
<li id="menu-item-8369" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8369"><a href="https://www.XXX.com/solutions/i-ctmp-solution/">i-CTMP</a></li>
<li id="menu-item-8370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8370"><a href="https://www.XXX.com/solutions/i-occ-solution/">i-OCC</a></li>
<li id="menu-item-8371" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8371"><a href="https://www.XXX.com/solutions/i-vsp-solution/">i-VSP</a></li>
</ul>
</li>
<li id="menu-item-487" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-487"><a href="https://www.XXX.com/case/">Case</a>
<ul class="sub-menu">
<li id="menu-item-1357" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1357"><a href="https://www.XXX.com/case/packaging-paper/">Packaging Paper</a></li>
<li id="menu-item-1358" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1358"><a href="https://www.XXX.com/case/tissue/">Tissue Paper</a></li>
<li id="menu-item-1359" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1359"><a href="https://www.XXX.com/case/specialty-paper/">Specialty Paper</a></li>
<li id="menu-item-1360" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1360"><a href="https://www.XXX.com/case/cultural-paper/">Cultural Paper</a></li>
<li id="menu-item-8274" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8274"><a href="https://www.XXX.com/case/i-ctmp/">i-CTMP</a></li>
</ul>
</li>
<li id="menu-item-492" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-492"><a href="https://www.XXX.com/page-service/">Service</a>
<ul class="sub-menu">
<li id="menu-item-500" class="menu-item menu-item-type-post_type_archive menu-item-object-maintenance menu-item-500"><a href="https://www.XXX.com/maintenance/">Maintenance</a></li>
<li id="menu-item-501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-501"><a href="https://www.XXX.com/page-repair-service/">Repair Service</a></li>
<li id="menu-item-502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-502"><a href="https://www.XXX.com/page-support/">Technical support</a></li>
<li id="menu-item-1768" class="menu-item menu-item-type-post_type_archive menu-item-object-fitting menu-item-1768"><a href="https://www.XXX.com/fitting/">Spare Parts</a></li>
</ul>
</li>
<li id="menu-item-3953" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3953"><a href="https://www.XXX.com/page-news/">News</a></li>
<li id="menu-item-505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-505"><a href="https://www.XXX.com/page-about/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-1750" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1750"><a href="https://www.XXX.com/page-about/">Company Profile</a></li>
<li id="menu-item-507" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-507"><a href="https://www.XXX.com/page-scientific/">Scientific Strength</a></li>
<li id="menu-item-509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-509"><a href="https://www.XXX.com/page-honour/">Honour</a></li>
<li id="menu-item-8391" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8391"><a href="https://www.XXX.com/page-history/">History</a></li>
</ul>
</li>
<li id="menu-item-511" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-511"><a href="https://www.XXX.com/page-contact/">Contact</a></li>
</ul></div>
CSS部分
#menu-main > .current-menu-ancestor > a, #menu-main > .current-menu-item > a, #menu-main > li:hover > a {
color : #19479D;
}
.header-nav-area {
margin-top : 4px;
display : flex;
flex-flow : row wrap;
justify-content : space-between;
align-items : center;
}
.header-nav-logo {
width : 218px;
position : relative;
top : -15px;
}
.header-nav-logo img {
max-width : 186px;
}
.menu-main-container {
width : 75%;
}
.menu a:hover { text-decoration:none; }
#menu-main {
margin-right : -18px;
display : flex;
flex-flow : row wrap;
justify-content : space-between;
}
#menu-main > li {
position :relative;
flex : none;
font-size : 18px;
line-height : 24px;
}
#menu-main > li > a {
position : relative;
display : block;
padding : 8px 6px 20px;
margin : 0 14px;
font-weight : 700;
z-index : 0;
}
#menu-main > li > a:after, #menu-main > li > a:before {
display : block;
content : '';
height : 2px;
width : 0;
border-radius : 1px;
z-index : -1;
position : absolute;
transition : all 0.3s;
}
#menu-main > li > a:before {
left : 0;
bottom : 5px;
background-color : #39B206;
}
#menu-main > li > a:after {
right : 6px;
bottom : 10px;
background-color : #19479D;
}
#menu-main > .current-menu-ancestor > a:after, #menu-main > .current-menu-ancestor > a:before, #menu-main > .current-menu-item > a:after, #menu-main > .current-menu-item > a:before, #menu-main > li:hover > a:after, #menu-main > li:hover > a:before {
width : 66%;
}
#menu-main > li > ul.sub-menu {
display : none;
position : absolute;
left : 50%;
top : 60px;
padding : 18px 0;
transform : translateX(-50%);
background-color :white;
z-index : 1000;
border-bottom : 3px solid #19479D;
border-top : 1px solid #ccc;
height: auto;
}
#menu-main .sub-menu > div { padding: 15px 0;
}
#menu-main .sub-menu > li {
/*white-space : nowrap;*/
transition : all 0.3s;
}
#menu-main .sub-menu > li a:hover {
}
.menu > li > ul.sub-menu a {
color: #19479D;
font-size: 14px;
white-space: nowrap;
}
.menu > li .sub-menu > li > a {
display : block;
font-size : 14px;
padding: 5px 25px;
font-weight:normal;
}
.menu .sub-menu > li > a:hover { color:#083e8d }
.menu li > .sub-menu {
/*width : 100%;*/
/*border-bottom : 1px solid #19479D;*/
}
.menu li > .sub-menu > .sub-menu .container > li {
}
/*products style*/
#menu-item-482 ul.sub-menu {display: block;}
#menu-item-482 > ul.sub-menu {
border:none;
display :block;
position: relative;
top: 10px ;
padding: 0 ;
width:100%;
height : auto;
top : 92px !important;
padding : 30px 0 28px;
border-top:solid 1px #ccc;
min-height: 615px;
}
#menu-main #menu-item-482 {
position : static;
}
#menu-item-482 .container > li {
clear: both;
display: block;
height: 50px;
line-height: 50px;
font-size: 16px;
text-align: left;
width: 380px;
border-bottom: 1px dotted #526384;
}
#menu-item-482 .container > li > a::after{ content:">" ; float:right; margin:0 15px 0 0 ; font-size: 14px;}
#menu-item-482 .container > li > a { color:#19479D; font-size:16px; font-weight:bold; }
/*///产品分类下子分类//*/
#menu-item-482 .container > li:hover { font-weight:bold; padding:0 8px 0 0 ; color: #209140}
#menu-item-482 .container li:hover ul.sub-menu {
/* display:inline-flex;*/
display:block;
}
#menu-item-482 .container li ul.sub-menu {
width:680px;
overflow:hidden;
display:none;
position: relative;
top: -55px;
left: 100%;
box-shadow: inset 0px -2px 1px #d0cece26, 1px 1px 1px #f6f9f926;
padding: 0 20px 55px 20px;
}
#menu-item-482 .container li ul.sub-menu > li {
display:block;
float: left;
height: 50px;
line-height: 50px;
font-size: 16px;
margin: 0 10px 0 0;
width: 48%;
}
#menu-item-483 .sub-menu li, #menu-item-484 .sub-menu li, #menu-item-485 .sub-menu li, #menu-item-486 .sub-menu li {
white-space : normal;
font-size : 14px;
line-height : 18px;
height : auto;
text-align : left;
}
#menu-item-483 .sub-menu li a:hover, #menu-item-484 .sub-menu li a:hover, #menu-item-485 .sub-menu li a:hover, #menu-item-486 .sub-menu li a:hover ,#menu-item-7100 .sub-menu li a:hover {
color : #19479D;
background-color : transparent;
}
#menu-item-483 .sub-menu, #menu-item-484 .sub-menu, #menu-item-485 .sub-menu, #menu-item-486 .sub-menu {
position : static;
display : block;
margin : 0 auto;
padding : 0;
transform : translateX(0);
border-bottom : none;
background-color : transparent;
}
#menu-item-7100 .sub-menu {
display: block;
position: relative;
left: 115px !important;
top: 0px;
border-bottom: 0;
}
/*.sub-menu > div > li > a { padding-left:20px; }*/
#menu-item-483 > a, #menu-item-484 > a, #menu-item-485 > a, #menu-item-486 > a ,#menu-item-7100 > a{
display : block;
margin-top : 8px;
font-weight : 700;
}
#menu-item-483 > a:after, #menu-item-484 > a:after, #menu-item-485 > a:after, #menu-item-486 > a:after {
display : none;
width : 130px;
height : 110px;
margin : 4px auto 0;
mix-blend-mode : multiply;
transition : all 0.3s;
content : '';
}
#menu-item-6485 > ul.sub-menu > li { width:120px ; min-width:120px !important ; }
/*
#menu-item-483 > a:after {
background : url(../img/pro-type01.png) center no-repeat;
background-size : contain;
}
#menu-item-484 > a:after {
background : url(../img/pro-type02.png) center no-repeat;
background-size : contain;
}
#menu-item-485 > a:after {
background : url(../img/pro-type03.png) center no-repeat;
background-size : contain;
}
#menu-item-486 > a:after {
background : url(../img/pro-type04.png) center no-repeat;
background-size : contain;
}
*/
/*
移动端
*/
.nav-close-btn, .nav-show-btn {
display : none;
text-align : center;
cursor : pointer;
}
.nav-show-btn {
width : 35px;
height : 30px;
line-height : 30px;
border-radius : 2px;
border : #ddd solid 1px;
}
.nav-close-btn {
position : fixed;
top : 16px;
right : 8px;
width : 40px;
height : 40px;
line-height : 40px;
z-index : 10000;
}
.nav-show-btn i {
font-size : 22px;
color : #333;
}
.nav-close-btn i {
font-size : 22px;
color : #333;
}
呈现结果
