Question

您好我正在尝试保持我的顶部导航菜单居中，同时左对齐出来的子菜单。为了做到这一点，我需要改变什么？谢谢！

<div id="container">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="/services.asp">Services &nbsp;<img src="images/tri2.gif"></a>
        <ul>
                    <li><a href="#">Massages</a></li>
                    <li><a href="#">Body Treatments</a></li>
                    <li><a href="#">Facials & Waxing</a></li>
                    <li><a href="#">Hair & Nails</a></li>
                       </ul> 
            </li>
         <li><a href="#">Packages &nbsp;<img src="images/tri2.gif"></a>
         <ul>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Linky</a></li>
                </ul> 
            </li>
          <li><a href="#">Specials</a></li> 
        <li><a href="#">Contacts</a></li>
              </ul>     
</div>

这是CSS：

#container {
width: 740px;
margin: -16px auto;
padding: 0 0 0 0px;
font: 100% Helvetica, Arial sans-serif;
font-size:14px;
}
ul#nav {
line-height: 23px;
padding: 0;
}
ul#nav li {
    float: left;
    position: relative;
    list-style: none;
    background: #006666;
}
    ul#nav li a {
        width: 146px;
        display: block;
        border: 1px solid #000;
        text-align: center;
        text-decoration: none;
        color: #fff;
                }
                ul#nav li:hover {background: #990000;}
        ul#nav ul {
            position: absolute;
            padding: 0;
            left: 0;
            top: 23px;
            visibility: hidden;
                        }
            ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: yellow;}

http://jsfiddle.net/chuckie365/5LuCA/

Answer 1

您需要的是另一个针对a元素的CSS：

ul#nav ul li a { 
  text-align:left;
}

Heres是演示 http://jsfiddle.net/5LuCA/10/

顶级菜单和子菜单的不同对齐方式

1 个答案: