我正在构建一个导航栏。下面的链接是我到目前为止刚刚完成的内容.
https://jsfiddle.net/dsdzyp23/2/
<div class="navbar-01">
<div class="navbar-01-container">
<div class="main-container">
<div class="logo-center">
<img style="width: 240px;" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg">
</div>
<button class="nav-toggle-btn">
<img style="width: 50px;" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/navigation-512.png">
</button>
<ul class="nav-categories">
<li><a href="#runway" data-sub-nav="runway">RUNWAY</a></li>
<li><a href="#women" data-sub-nav="women">WOMEN</a></li>
<li><a href="#men" data-sub-nav="men">MEN</a></li>
<li><a href="#children" data-sub-nav="children">CHILDREN</a></li>
</ul>
</div>
</div>
<div id="runway" class="navbar-sub">
<div class="main-container">
<div class="nav-sub-list">
<ul class="nav-sub-categories">
<a href="#women">WOMEN</a>
<li><a href="#Cruise-2018">Cruise 2018</a></li>
<li><a href="#Fall-Winter-2017-Runway">Fall Winter 2017 Runway</a></li>
<li><a href="#Pre-Fall-2017">Pre-Fall 2017</a></li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
<a href="#men">MEN</a>
<li><a href="#Cruise-2018">Cruise 2018</a></li>
<li><a href="#Fall-Winter-2017-Runway">Fall Winter 2017 Runway</a></li>
<li><a href="#Pre-Fall-2017">Pre-Fall 2017</a></li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
<a href="#unskilled-worker">UNSKILLED WORKER</a>
</ul>
</div>
</div>
</div>
</div>由于我的子类别没有用锚点包装，当我的鼠标离开锚点时，子类别div 关闭，因此我无法访问包裹在子类别div.
中的内容我想知道用锚点包装子类别是否是实现导航栏的最佳方式？(考虑到响应式网页设计，似乎包装在一起是最简单的实现方法？
这是制作菜单的标准方法。它还取决于要求。
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.nav-list {
text-align: center;
}
.nav-list-item {
display: inline-block;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.nav-list-item:hover .subnav-list {
display: block;
}
.subnav-list {
display: none;
width: 100px;
transform: translateX(-50%);
position: absolute;
top: 100%;
left: 50%;
}<nav class="nav">
<ul class="nav-list">
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 1</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 2</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 3</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 4</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 5</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 6</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 7</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 8</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 9</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
<li class="nav-list-item">
<a href="" class="subnav-link">Nav 10</a>
<ul class="subnav-list">
<li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
<li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
</ul>
</li>
</ul>
</nav>