Jump to content
  • 0

Выпадающее меню li width:100%, или почему firefox - плохой браузер.


logicface
 Share

Question

Всем привет! Имею проблему:

Есть впадающее меню на CSS - http://jsfiddle.net/ydKX6/3/

Работает почти во всех браузерах отлично, но как говориться в семье не без сами знаете кого.

Достопочтенный товарищ firefox не хочет правильно растягивать дочерние <li> элементы (те самые, которые выпадают).

Что посоветуете делать камрады? :unsure:

 

Для тех кто не понял: Дочерние <li> элементы должны быть ширины не меньше чем родительские <li> элементы. Firefox растягивает их по размеру вей страницы.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Короче я сделал так, что бы работало. Единственный способ который я нашел - это явно указать ширину родительским <li> через %. Тоже конечно не хорошо, но раз лис упирается, то что поделаешь.) Вот решение - http://jsfiddle.net/ydKX6/6/

Может кому пригодиться.

Edited by logicface
Link to comment
Share on other sites

  • 0

хм. А разве display: block; width: 100%; для li не решает проблема? о_О 

Ну и для ul display: block;

 

Много же готовых реализаций выпадающих меню, вы посмотрите реализации. Не надо придумывать ерунду.

  • Like 1
Link to comment
Share on other sites

  • 0

хм. А разве display: block; width: 100%; для li не решает проблема? о_О 

Ну и для ul display: block;

 

Много же готовых реализаций выпадающих меню, вы посмотрите реализации. Не надо придумывать ерунду.

Если для tupul вы говорите, то лис этой не поймет, если текста будет больше чем ширины <li>, то тест будет выползать за <li>. http://jsfiddle.net/ydKX6/8/

Можно сделать так http://jsfiddle.net/ydKX6/7/

Спасибо, буду разбираться как вы это сделали.)

Link to comment
Share on other sites

  • 0

 

то тест будет выползать за
ну дак потому что white-space: nowrap;

 

А без него текст не в 1 строку.=) Мне надо сделать что бы блок расширялся еще шире чем 100% если текст больше блока, а не что бы текст начинал сживаться под размер блока.)

Edited by logicface
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By garmoni
      Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.
      <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }  
    • By kudg0
      У меня возникла проблема, есть код который задает меню в верхней плашке на сайте, при наведении на пункт услуги-открывается еще три  по-умолчанию скрытых пункта класса submenu, проблема заключается в том, что если заходить с телефона, то навестись на пункт услуги не получается, а если просто нажать на него то срабатывает переход и еще 3 пункта не успевают открыться.
      <ul class="topmenu" > <li><a href="#usl">Услуги</a> <ul class="submenu"> <li><a href="us.html" class="navi">Пакеты </a></li> <li><a href="raz.html" class="navi">Услуги</a></li> <li><a href="spec.html" class="navi">Специальные</a></li> </ul> </ul> Как можно решить эту проблему?
    • By Seven
      Добрый день.
      Создаю здесь тему впервые. Собственно, опыта о данном ресурсе пока нет. Но изучил местные правила.
      1)Ссылка на проблему - www.iy-style.com
      2)Выдвижное меню пропадает (пункт Utbildningar), так как соприкасаеться с другим контейнером. Насколько сложно это исправить? Я использовал готовый код меню, понятное дело. Не знаю, насколько большая проблема, может придеться переделывать весь принцип, по которому я делаю этот простейший сайт, так что из-за меню теперь у меня все стоит.
      3)Необхадимо что бы выдвижное меню работало как подабает - т.е. не пропадало бы при наведении на него мышкой. И не сливалась бы с контейнером, где параграф и текст.
      Я знаю лишь азы вертски и такие вещи как галареи, формы регистраций и на этот раз меню - подключаю уже сделанные кем то и лежащие в свободном доступе. 
       
    • By фдуч
      Привет!
      возникла такая проблема при тестировании выпадающего меню, внутри category блок  category1 а в нем category level2 который переносится по слогам а должен тянуться по ширине строки
      Пример здесь
      http://213.111.228.103/drop/
      ps: вроде-бы это стандартное решение с position:absolute и должно работать но возможно я где-то ошибку допустил, никак не пойму...первый уровень меню category1 нормально тянется по содержимому а уже вложенный в category1  не корректно работает
    • By zulus
      Есть горизонтальное  меню на сайте http://www.atlasokon.com.ua/vibor.htmlвсе работает.
      Пытаюсь перенести это же меню в раздел каталога http://www.atlasokon.com.ua/catalog/compare.phpменю не хочет выпадать.
      Подскажите в чем проблема и где копать?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy