Html Can'；I don’我的菜单看起来不对，我做错了什么？

我看不清楚我的菜单是否正确

上面是它应该看起来的样子。但我不能让它看起来像那样。我做错了什么

                <ul id="MainMenu">
                    <li>a</li>
                    <li>b
                        <ul>
                            <li>1</li>
                            <li>2</li>
                        </ul>
                    </li>
                    <li>c
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>    
                    </li>
                </ul>



#MainMenu {
    list-style-type: none;
}
#MainMenu li {
    display: inline;
}

a
b

一,
二,


c

一,
二,
三,



#主菜单{
列表样式类型：无；
}
#主菜单李{
显示：内联；
}

应该是：

#MainMenu li {
  display: block;
}

---

试着这样做：

#MainMenu {
    list-style-type: none;
}
#MainMenu>li {
    float: left;
    margin-right: 10px;
}
#MainMenu ul li {
    list-style: none;    
}
#MainMenu ul {
    padding: 0;
}

---

JS Fiddle

你需要4个步骤，因为你有多个不同级别的LI

*{
   /* all sector for reset */
   padding:0;
   margin:0;

}
   #MainMenu {

    }
    #MainMenu >li {
        /*level 1 from root*/
    }
    #MainMenu ul {

    }
    #MainMenu ul li {
        /*level 2 from root*/
    }
    #MainMenu li {
        list-style-type: none;
        /*all levels from root*/
    }

然后，为了让您看到发生了什么，我们首先将这个css添加到LIs的第一级

演示：

现在我们添加all选择器

最后，我们在所有LIs中添加填充

并删除实体边框，以获得所需的内容

边框：1px实心；

#MainMenu >li {
    display:inline-block;
    text-align:center;
    border:1px solid;
    width:100px;
    height:100px;
    vertical-align:top;
}

*{

    padding:0;
    margin:0;
}

#MainMenu li {
    list-style-type: none;
    padding-top:6px;
}