0
네비게이션에 하위 메뉴 항목을 추가하려고하지만 탐색의 올바른 HTML에도 하위 메뉴가 표시되지 않습니다.스켈레톤 워드 프레스 테마에서 하위 네비게이션 만들기
스켈레톤 워드 프레스 테마를 사용하며 필요에 따라 헤더가 수동으로 업데이트되지만 하위 메뉴를 추가해야합니다.
HTML :
<div id="navigation" >
<div class="menu container">
<ul class="row sixteen columns">
<li class="page_item menu-home"><a href="/">Home</a></li>
<li class="page_item page-item-56"><a href="/about">About</a></li>
<ul class="sub-menu">
<li class="page_item page-item-10"><a href="/volunteer">Volunteer</a></li>
</ul>
<li class="page_item page-item-4"><a href="schedule">Schedule</a></li>
<li class="page_item page-item-3"><a href="shows">Shows</a></li>
<li class="page_item page-item-4663"><a href="podcasts">Podcasts</a></li>
<li class="page_item page-item-12"><a href="features">Features</a></li>
<li class="page_item page-item-13"><a href="events">Events</a></li>
<li class="page_item page-item-8"><a href="contacts">Contact</a></li>
<li class=""><a href="/voices">Voices</a></li>
</ul>
</div>
</div>
CSS :
귀하의 하위 메뉴가 있습니다/* @group Navigation Bar */
#navigation {
width: 100%;
background: #1B7A9D;
background: rgba(3, 68, 91, 0.5);
position: relative;
border: none;
-webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
font-family: 'Coustard', 'Georgia', serif;
}
#navigation ul li {
position: relative;
border: none;
}
#navigation ul li a {
background-image: none;
padding: 15px 20px /* 21px */;
text-decoration: none;
display: block;
font-weight: normal;
color: #ffffff;
border: none;
}
/* Navbar Hover Links */
#navigation ul li:hover a,
#navigation ul li a:hover {
background: rgba(255, 255, 255, 0.2);
position: relative;
}
#navigation ul li:hover li a {
color: #595959;
font-weight: normal;
}
/* Navbar Active Links */
#navigation ul li.active a {
color: #333;
background: #fff;
}
/* Nav Sublevel */
#navigation ul.sub-menu {
background: -moz-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
border-color: #EAEAEA #F5F5F5 #F5F5F5 #F5F5F5;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
#navigation ul.sub-menu li {
border: none;
}
/* Nav Sublevel Links */
#navigation ul.sub-menu li a {
background: #f0f0f0;
padding: 5px 0px 5px 8px;
height: 32px;
line-height: 32px;
border-radius: 0;
min-width: 210px;
border-bottom: none;
position: static;
behavior: none;
}
/* Nav Sublevel Hover */
#navigation ul.sub-menu li a:hover {
background: #fff;
border-bottom: none;
}
/* @end */