Question

我的菜单显示为：

   MENU ITEM 1 | MENU ITEM 2 | MENU ITEM 3

   ..........MENU Stuff  | ....MENU Stuff  | MENU Stuff

等等。

我希望它显示：

   MENU ITEM 1 | MENU ITEM 2 | MENU ITEM 3

   MENU Stuff.....| MENU Stuff .. | MENU Stuff

如何让它在标题选项下居中？这有点乱，但我认为这是与我的菜单相关的所有编码。

HTML

<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Menu 1
    <ul>
        <li>Stuff</li>
        <li>More stuff</li>
        <li>And more</li>
    </ul></li>
<li>Things
    <ul>
        <li>More</li>
        <li>Today</li>
        <li>Ideas</li>
    </ul></li>

CSS

ul#menu {
    list-style: none;
    margin-top: -50px;
    text-align: right;
    margin-left: 420px;
}
ul#menu li {
    float: left;
    text-align: right;
    display: inline;
}
li {
    width: 110px;
}
ul#menu li a{
    display: inline;
    background:white;
    text-decoration: none;
}
ul#menu li a:hover{
    width:120px;
    color: black;
    background:white;
}
ul#menu li ul {
    display: none;
}
ul#menu li:hover ul {
    display: block; /* display the dropdown */
}
ul#menu li:hover ul li {
    background: white;
    display: block;
    text-align: center;
    padding: 5px;
}

Answer 1

检查： -

<强> DEMO

ul#menu {
    list-style: none;
    /*margin-top: -50px;*/
    text-align: right;
    /*margin-left: 420px;*/
    float:right
}
ul#menu li {
    float: left;
    display: inline;
    text-align:left;
}
li {
    width: 110px;
}
ul#menu li a{
    display: inline;
    background:white;
    text-decoration: none;
}
ul#menu li a:hover{
    width:120px;
    color: black;
    background:white;
}
ul#menu li ul {
    display: none;
        padding:0;
    margin:0;
        float:left

}
ul#menu li:hover ul {
    display: block; /* display the dropdown */

}
ul#menu li:hover ul li {
    background: white;
    display: block;
    text-align:left;
}

<强> Another DEMO

ul#menu {
    list-style: none;
   margin-top: -50px
    text-align: right;
    margin-left: 420px;
}
ul#menu li {
    float: left;
    text-align: right;
    display: inline;
}
li {
    width: 110px;
}
ul#menu li a{
    display: inline;
    background:white;
    text-decoration: none;
}
ul#menu li a:hover{
    width:120px;
    color: black;
    background:white;
}
ul#menu li ul {
    display: none;
    margin:0;
    padding:0
}
ul#menu li:hover ul {
    display: block; /* display the dropdown */
}
ul#menu li:hover ul li {
    background: white;
    display: block;
    text-align: left;
    padding: 5px;
}

Answer 2

只需在ul中添加填充，因为ul元素的默认值添加了左边的填充

ul#menu li ul {
    display: none;
    padding:0;
}

然后添加此

ul#menu li ul li {
    text-align-left;
}

如何在下拉菜单中将菜单选项置于其标题选项下？

2 个答案: