今天写辅助列表的时候，想起了学习html css的时候，刚开始用css写辅助列表的时候，犯了致命的错误。 在第一列表中用内容的padding值展开，写第二列表时，我没有想到。 用内容的第一列表的padding值同样扩展内容，喂，然后把第二列表的内容和第一列表的内容一样的一天后，我又想起来了。 不是啊。 如果二次列表也用内容进行padding，扩大了值，如果文字数不同，其宽度不是也不一样吗？ 之后，我在网上也试着找了几个代码，最后自己找到了一个方法，解决了这个小错误()
在这里，我给你看一下解决当初问题的小方法。 我希望初学者在css上写辅助列表时，不要和我当时的想法一样天真
以前的错误方法会产生以下问题。
图1
图2
1 .辅助列表设置宽度，当辅助列表的字符数与一次列表的字符数不同时，会出现文本不居中的一次文本溢出的现象。
2 .在二次列表中没有设定宽度的情况下，由于该宽度完全根据a标签内容的padding值进行了扩展，因此其字符数比一次列表的字符数多的情况如图2所示
要解决这样的问题，简单的方法是给辅助列表ul增加宽度，该宽度为对应的主列表宽度的100%； 另外，2级列表并不是用文本的padding值展开，(因为已经确定了宽度)，只需将a标签的值配置在水平、垂直、中央即可。
效果如图3所示：
图3
注：文中及列表之间的竖线为了方便使用了左边框。 我不推荐这样写。 我建议你写在li下面
所有代码如下所示。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style * { padding 3360； 边距： 0； }ul{list-style: none； }a{text-decoration: none； }.nav{width: 100%； height: 50px； background-color: #f00； }.content{width: 1000px； height: 50px； 边距： 0自动； } ul.ul1li { position : relative； 浮动：左； line-height: 50px； } ul.ul1lia { display : inline-block； height: 50px； 颜色： # 000； padding-left: 30px； padding-right: 30px； border-left:1px solid #000； }ul.ul2{display: none； 定位：助手； width: 100%； height: 150px； top: 50px； background-color: yellow； }ul.ul2li{line-height: 50px； }ul.ul2lia{width: 100%； 显示：块； 文本照明3360中心； } ul.ul1li : hover ul.ul2 { display : block； } ul.ul 2li a : hover { background-color : red； }/style/headbodydivclass=' nav ' divclass=' content ' ul class=' ul1 ' liastyle=' border 3360 none ' href=' # ' liav ' lilia href=' # ' link1/a/Li/ul/lilia href=' # ' link1/a/lilia href=' # ' link1/a