javascript - 简单 <ul> <li> HTML 结构 : MegaMenu

Question

我正在开发一个元素，我创建了 MegaMenu，我从 JSON 文件中获取它。编写简单的 HTML 结构逻辑。

#menu { border:solid 2px green; float:left;}
#menu ul { padding:0; margin:0; clear:both; float:none;}
#menu ul li {padding-bottom:5px; color:green; float:left; list-style:none; width: 20%;}
li a { color:green;}
#menu ul li li {float:none;}
li li a { color:blue;}

<div id="menu">
    <ul>
        <li><a href="#">Nav Item 1</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
        <li><a href="#">Nav Item 2</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
        <li><a href="#">Nav Item 3</a>
            <ul>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
        <li><a href="#">Nav Item 4</a>
        </li>
        <li><a href="#">Nav Item 5</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 6</a>
        </li>
         <li><a href="#">Nav Item 7</a>
            <ul>
               <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 8</a>
            <ul>
               <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 9</a>
            <ul>
               <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 10</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
    </ul>
</div>

问题:我的输出很疲倦。单击运行代码片段按钮。我发现，列表项没有正确对齐。

所需输出:我想要将列表项正确对齐。我希望第 6 项出现在第 1 项之后，并且不会有空格。

不使用 jQuery 的 JavaScript 是否可以实现这一点？

Answer 1

您还需要添加此内容

#menu >ul>li {
   padding-bottom:5px; 
   color:green; 
   float:left; 
   list-style:none; 
   width: 20%; 
   height:250px
}  

Demo