Navigation 导航子菜单的Li未在线显示

我想做一个水平显示子菜单的li。不知道出了什么问题，我以为一切都好，但积木是垂直的

LI在第一行应该是3-4块（没有更多的空间），然后在下一行是3-4块。大概是这样的：

代码如下^： CSS:

HTML

<div  id="navigation" >
<nav>
<ul>
<li><a href="/">sometext</a> </li> 
<li><a href="/">sometext</a>
         <ul>

            <li ><a  href="/" class="submenubonbonlink"> <div class="navbonbon navcategorysimages"></div><p>sometext</p></a></li >
            <li ><a  href="/" class="submenubonbonlink"> <div class="navbonbon navcategorysimages"></div><p>sometext</p></a></li >
             <li ><a  href="/" class="submenubonbonlink"> <div class="navbonbon navcategorysimages"></div><p>sometext</p></a></li >
         </ul> 
      </li>
<li><a href="/">sometext</a></li>

</ul>

</nav>

<div  id="navigation" >
<nav>
<ul>
<li><a href="/">sometext</a> </li> 
<li><a href="/">sometext</a>
         <ul>

            <li ><a  href="/" class="submenubonbonlink"> <div class="navbonbon navcategorysimages"></div><p>sometext</p></a></li >
            <li ><a  href="/" class="submenubonbonlink"> <div class="navbonbon navcategorysimages"></div><p>sometext</p></a></li >
             <li ><a  href="/" class="submenubonbonlink"> <div class="navbonbon navcategorysimages"></div><p>sometext</p></a></li >
         </ul> 
      </li>
<li><a href="/">sometext</a></li>

</ul>

</nav>