Создание абсолютного элемента ширины родительского элемента

Question

Создание абсолютного элемента ширины родительского элемента

0

У меня есть раскрывающееся меню, которое является абсолютным, оно занимает ширину своего родителя, установленное на 33% его ли.

Теперь, когда я переношу размер на мобильный, я хочу, чтобы выпадающее меню было 100% -ной шириной его родительского родителя.

Таким образом, в основном на рабочем столе: я хочу, чтобы падение было шириной его родительского li.

На мобильном устройстве: я хочу, чтобы капля была шириной всего навигатора.

Мне комфортно со СМИ, я просто задавался вопросом, как я могу заставить css работать.

<ul>
  <li class="n1">Nav 1</li>
  <li class="n2">Nav 2</li>
  <li class="n3">Nav 3
    <ul class="dropdown">
        <li>DropDown 1</li>
        <li>DropDown 2</li>
        <li>DropDown 3</li>
    </ul>
</li>

Здесь скрипка:

JSFiddle

В идеале я бы хотел использовать только CSS-решение.

panthro 11 апр. 2014, в 09:56

Источник

0

Вы не можете идентифицировать клиентскую платформу, используя CSS. Вы должны сделать 2 отдельных класса и присоединить мобильный / настольный класс по мере необходимости, используя JavaScript
Banana 11 апр. 2014, в 07:51

Теги:

html

css

css3

css-position

html-lists

3 ответа

0

@media screen and (max-width: 600px){
    .dropdown, li{
        width: 100%;
    }    
}

DEMO

4dgaurav 11 апр. 2014, в 06:37

0

Добавьте в свой стиль .dropdown

.dropdown{
    left:0;
    width:100%;
}

& использовать следующий медиа-запрос

@media screen and (max-width:960px) {
    ul{position:relative;}
    ul li{position:static;}
}

Я советую вам дать вам базовый уль-ли класс, чтобы избежать конфликта.

demonofthemist 11 апр. 2014, в 06:17

Ещё вопросы

Вы не можете идентифицировать клиентскую платформу, используя CSS. Вы должны сделать 2 отдельных класса и присоединить мобильный / настольный класс по мере необходимости, используя JavaScript

Ming · Accepted Answer · 2014-04-11T06-46-00.000Z

Если вы хотите сохранить родителей и сделать только раскрывающуюся ширину 100%, вы можете сделать что-то вроде этого:

http://jsfiddle.net/W44XL/6/

@media only screen and (max-width:480px) {
    ul { position: relative; }
    li { position: static; }
    .dropdown { left: 0;
        right: 0; }
}