не может контролировать высоту с процентом в меню CSS

Я создал меню CSS с подменю, используя значения пикселей для размеров. Теперь, когда я понимаю, насколько глупой была эта идея, я попытался преобразовать все значения пикселей в проценты, используя формулу (size / context) * 100, чтобы сделать меню отзывчивым.

Первоначальная версия выглядела так: введите здесь описание изображения

После преобразования всего в процентные значения я получаю следующее: http://jsfiddle.net/5CK9n/

Основная причина в том, что я все еще использую px для указания высоты nav ul li. Всякий раз, когда я пытаюсь указать эту высоту в процентах, верхние пункты меню (nav ul li) вообще не меняют свой размер, а при наведении на один из них для вывода подменю (nav ul li ul) верхний пункт меню растет в высоту повсюду.

Может ли кто-нибудь сказать мне, что может быть причиной такого поведения?


menu css responsive-design percentage height
person slagjoeyoco    schedule 31.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Прежде всего, css, благодаря которому это происходит:

nav > ul > li.hasSubMenu:hover + li {
/* this-> */    margin-left: 25%;   
    }

И это:

nav ul li:hover > ul {
        display: block;
        position: relative;
/* and this below */
        top: -100%;
        left: 100%;
    }

Удалите значения top, left и margin-left. См.: jsFiddle.

Во-вторых, используйте media-queries, чтобы сделать вашу навигацию отзывчивой. Использование только процентов неэффективно.

person Peter Noble    schedule 31.07.2014
comment
Спасибо за ваш ответ - я установил верх и поле, чтобы подменю вышло рядом с пунктом главного меню. Однако, поскольку это вложенные теги ul, расширяющееся подменю вызывает странное поведение высоты, верно? Так что, думаю, мне придется убрать подменю ul из основного ul. Однако меня больше всего беспокоит шрифт — теперь я могу контролировать высоту (после того, как для содержимого ul установлено значение inline-block), но шрифт всегда либо слишком большой, либо слишком маленький. Мне нужно больше узнать о масштабировании шрифта... - person slagjoeyoco; 01.08.2014