html - 非语义导航菜单

Question

我需要知道如何使用 Unsemantic 框架（或 960gs）创建导航栏。

我的菜单结构是

<div> <ul> <li></li> </ul> </div>.

我已经尝试了很多，但仍然无法找出问题所在。

编辑

我使用 wordpress。所以它创建导航菜单。在浏览器中呈现的最终代码如下：

<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper"> 
<div class="grid-container">
 <div class="menu">
  <ul>
   <li class="page_item page-item-2">
     <a href="http://localhost/wpmarket/?page_id=2">ُSample Page</a>
   </li>
   <li class="page_item page-item-5"><a href="http://localhost/wpmarket/?page_id=5">ُSample Page 2</a>
   </li>
  </ul>
 </div>
</div>
</nav>

虽然我的 Wordpress 标记如下：

<div class='grid-100 height-auto black-gray-bg font-tahoma'>

<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'> 
    <div class='grid-container'>
    <?php 

        wp_nav_menu(); 
    ?> 
</div>
</nav>

</div>

Answer 1

grid-container 类用于外部容器，grid-parent 类用于内部或嵌套容器。在你的代码中，你有这个倒退。

grid-parent 类允许您将自包含网格与普通网格项对齐。该容器包含所有网格项。所以 grid-parent 只是一个指示器，它或任何东西将包含与其在页面上的比例和排序相关的更多项目。

您可以使用此结构或类似结构：

<nav class="grid-container">
 <ul class="grid-100 grid-parent">
  <li class="grid-25">...</li>
  <li class="grid-25">...</li>
  <li class="grid-25">...</li>
  <li class="grid-25">...</li>
 </ul>
</nav>