0

我看不到让我的菜单看起来正确。

在此处输入图像描述

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

                <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;
}
4

3 回答 3

1

应该:

#MainMenu li {
  display: block;
}
于 2013-10-29T02:53:33.633 回答
1

您需要 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 添加到 LI 的第一级

演示:http: //jsfiddle.net/LcDY9/

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

现在我们添加所有选择器

http://jsfiddle.net/LcDY9/1/

*{

    padding:0;
    margin:0;
}

在此处输入图像描述 最后我们为所有 LI 添加填充 http://jsfiddle.net/LcDY9/2/

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

并删除具有您正在寻找的东西的实心边框

边框:1px 实心; 在此处输入图像描述

于 2013-10-29T05:44:18.237 回答
0

尝试这样的事情:

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

JS 小提琴 http://jsfiddle.net/L2wsA/

于 2013-10-29T03:09:53.527 回答