Question

我有一个相当标准的CSS驱动下拉菜单（如果需要，列表和列表项的CSS在下面）。我想要做的就是将它放在浏览器中（必须支持MS IE 7）......但这似乎让我感到厌烦： - （

有人可以帮我这个吗？也许一个简单的例子？但实际上，我认为我可能只需要一个封闭DIV的CSS类定义......

/*Color navigation bar normal mode*/  
.menu a,  
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font- weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}  
.menu ul {list-style-type:none;padding:0; margin:0;}  
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }  
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }    
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}  
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}     
/*Color main cells hovering mode*/   
.menu ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}  
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;}   
/*Color subcells normal mode*/
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/  
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}  
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} 
/*Color main cells hovering mode*/
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }  
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;}   
/*Color subcells normal mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}   
/*Color subcells hovering mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/

Answer 1

您可以使用发送的链接g.b来执行此操作，但您也可以使用display:inline-block;来执行此操作，这样可以减少代码。

请参阅此jsfiddle：http://jsfiddle.net/4Q5N2/

<div>
    <ul>
        <li>center</li>
        <li>menu</li>
    </ul>
</div>

-

div { background:orange; }
ul {
    list-style:none;
    text-align:center;
}
ul li {
    display:inline-block;
    zoom:1;
    *display:inline;
    margin:5px;
    background:purple;
}

又一个“如何集中我的菜单？”题

1 个答案: