Раскрывающееся меню уменьшение масштаба это линия разрыва

0

У меня есть представление о выпадающем меню. Я пытаюсь это сделать. Но когда я увеличиваю или уменьшаю масштаб, это прерывает линию. Мой код:

<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========================================================================================== */

Пожалуйста, расскажите мне, как в первом меню не прерывать линию, когда я увеличиваю масштаб изображения! Большое спасибо за вашу помощь!

  • 1
    Работает нормально: jsfiddle.net/DfHSS/37
  • 0
    когда я увеличиваю и уменьшаю главное меню, последнее меню перерывается на следующую строку. Я не хочу так. Я вижу какой-то веб-сайт, при уменьшении масштаба главное меню становится больше или меньше, но оно не прерывается
Теги:

1 ответ

0

Вы должны использовать относительную ширину.

Вот пример: http://jsfiddle.net/DfHSS/40/

CSS

#menu {
    width:100%;
}

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

Затем, если вы хотите изменить размер шрифта вашего текста, вам придется использовать медиа-запрос

Поделиться
  • 0
    Спасибо за вашу помощь. но если мне нравится ваше руководство, содержимое тега li можно скрыть. Я хочу, чтобы этот сайт: royalgolf.com.vn . при уменьшении масштаба это не будет скрыто. нравится
  • 0
    Вам нужно установить автоматическую ширину для вашего "меню", а затем просмотреть текст внутри, чтобы соответствовать в полном объеме

Ещё вопросы

Сообщество Overcoder
Наверх
Меню