html - 下拉菜单放大缩小是断线

Question

我有一个关于下拉菜单的练习。我试着去做。但是当我放大或缩小时，它会断线。我的代码是这样的:

<div id="menu">
        <ul id="nav">
            <li id="trangchu"><a accesskey='0' href='/'>aaaaaaaaa</a></li>
            <li id="gioithieu"><a accesskey='0' href='#'>aaaaaaaaa</a>
                <ul>
                    <li><a accesskey='0' href='#'>aaaaaaaaa</a></li>
                    <li><a accesskey='0' href='#'>aaaaaaaaa</a></li>
                    <li><a accesskey='0' href='#'>aaaaaaaaa</a></li>
                    <li><a accesskey='0' href='#'>aaaaaaaaa</a></li>
                </ul>
            </li>
            <li id="chobeyeu"><a accesskey='0' href='#'>aaaaaaaaa</a></li>
            <li id="chochame"><a accesskey='0' href='#'>aaaaaaaaa</a></li>
            <li id="tintuc"><a accesskey='0' href='#'>aaaaaaaaa</a></li> 
            <li id="image"><a accesskey='0' href='#'>aaaaaaaaa</a></li>
            <li id="entertain"><a accesskey='0' href='#'>aaaaaaaaa</a></li>
            <li id="video"><a accesskey='0' href='#'>aaaaaaaaa</a></li>      
            <li id="lienhe"><a accesskey='0' href='#'>aaaaaaaaa</a></li>  
        </ul>             
     </div>

和我的CSS:

    /*MENU*/
#menu *{margin:0;padding:0}
#menu{background:#fff;width:986px;height:33px;border:1px solid #fff;}
#nav img{margin: 5px 0;}
#nav, #nav ul {list-style:none;position: relative; line-height:34px;display:inline-block;}
#nav a, #nav a:active, #nav a:visited {display: block;padding: 0px 17px;text-transform:uppercase; color: white;text-decoration: none;line-height:34px;}
#nav a:hover {background:url(/Resources/Images/bg_mHover.gif) repeat-x;}
#nav .actives {background:url(/Resources/Images/bg_mHover.gif) repeat-x;}
#nav li {float: left;position: relative; padding:0;}
#nav li a {color: #FFFFFF;font-weight:bold;font-size:12px;}
#nav ul {position: absolute;width: 180px; display: none;background:#0B8E36;z-index:1000;}
#nav li ul a {width:178px;float: left;color: #FFFFFF;font-family: Arial,Helvetica,sans-serif;font-size: 11px;font-weight: normal;margin: 0;text-align: left;padding:0 0 0 17px;}
#nav li ul a:hover {background:#075C22;padding:0 0 0 17px;width:163px}
#nav li ul li{border-bottom: 1px solid #FFFFFF;background:none;width:180px}
#nav ul ul {}
#nav li ul ul {left:200px;padding:0;margin:0}
#nav li:hover ul ul, #nav li:hover ul ul ul,#nav li:hover ul ul ul ul {display: none;}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {display: block;}



#menu ul li#trangchu
{
    background:#df0418;
}

#menu ul li#gioithieu
{
    background:#058ace;
}

#menu ul li#chobeyeu
{
    background:#ed145b;
}

#menu ul li#chochame
{
    background:#1e9b27;
}

#menu ul li#tintuc
{
    background:#d302cc;
}

#menu ul li#image
{
    background:#5B4D8D;
}

#menu ul li#video
{
    background:#B04419;
    width:auto;
}

#menu ul li#entertain
{
    background:#fe9201;
}

#menu ul li#lienhe
{
    background:#c8ff00;
}
/* End menu========================================================================================== */

请指导我如何在放大缩小时第一个菜单不换行!非常感谢您的帮助!

Answer 1

你需要使用相对宽度。

这是一个例子:http://jsfiddle.net/DfHSS/40/

CSS

#menu {
    width:100%;
}

#nav li {
width: 10% !important;
}

然后，如果你想修改文本的字体大小，你将不得不使用媒体查询