За последние 24 часа нас посетили 17287 программистов и 1202 робота. Сейчас ищет 1271 программист ...

Не получается выпадающее меню

Тема в разделе "HTML и CSS", создана пользователем Анна Л., 17 май 2018.

  1. Анна Л.

    Анна Л. Новичок

    С нами с:
    2 май 2018
    Сообщения:
    3
    Симпатии:
    0
    Изучила основы html/css и вот решила сверстать страничку. И тут немного запуталась. Не могу понять очередности тегов (в смысле <div class=, а потом ul class="menu_list? можно ли так?), и почему не выводится выпадающее меню. В шапке вообще меню разъехалось по всей шапке. Что не так, подкорректируйте плиз.
    <div class="menu_nav">
    <ul class="menu_list">
    <li><a href="Rabbits.html">Rabbits</a></li>
    <ul class="submenu">
    <li><a href="script_11.html">Submenu 1</a></li>
    <li><a href="script_11.html">Submenu 2</a></li>
    <li><a href="script_11.html">Submenu 3</a></li>
    </ul>
    <li><a href="Foxes.html">Foxes</a></li>
    <li><a href="Dogs.html">Dogs</a></li>
    <li><a href="Cats.html">Cats</a></li>
    <li><a href="Insects.html">Insects</a></li>
    </ul>
    </div>

    css
    .menu_nav {
    margin:0 auto 20px;
    padding:0;
    height:55px;
    text-align: center;
    }
    .menu_nav ul {
    list-style:none;
    padding:20;
    height:50px;
    float:none;
    background:#000;

    }
    .menu_nav menu_list {
    text-align:center;}

    .menu_nav ul li {
    margin:0;
    padding:0;
    float:left;

    }
    .menu_nav ul li a {
    display:block;
    margin:0;
    padding:19px 32px;
    font-size:15px;
    line-height:17px;
    font-weight:normal;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    background:none;

    }


    И кстати, на .menu_nav menu_list вообще почему-то не реагирует. Где тут ошибка?
     
  2. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    вложенный ul должен быть внутри тэга li
    текст выравнивается по центру. Всё работает.
     
  3. Анна Л.

    Анна Л. Новичок

    С нами с:
    2 май 2018
    Сообщения:
    3
    Симпатии:
    0
    Что за ответ? У меня не получается выпадающее окно...
    --- Добавлено ---
    Что-то не так с кодом. Подскажите плиз что?
     
  4. paschaopencart

    paschaopencart Активный пользователь

    С нами с:
    18 май 2018
    Сообщения:
    118
    Симпатии:
    16
    Адрес:
    Урал
    конечно не так, стили не смотрел/не проверял, но даже визуально ясно где ошиблись, вот кусок

    Код (Text):
    1. <li><a href="Rabbits.html">Rabbits</a></li>
    2. <ul class="submenu">
    3. <li><a href="script_11.html">Submenu 1</a></li>
    4. <li><a href="script_11.html">Submenu 2</a></li>
    5. <li><a href="script_11.html">Submenu 3</a></li>
    6. </ul>
    а должно быть как минимум так

    Код (Text):
    1. <li><a href="Rabbits.html">Rabbits</a>
    2. <ul class="submenu">
    3. <li><a href="script_11.html">Submenu 1</a></li>
    4. <li><a href="script_11.html">Submenu 2</a></li>
    5. <li><a href="script_11.html">Submenu 3</a></li>
    6. </ul>
    7. </li>
    то есть структура выпадающего меню должна быть такова


    Код (Text):
    1. <li>Тут заголовок/пункт меню #1 c "выпадающим списком)
    2. <ul class="submenu">
    3. <li>Тут подкатегория</li>
    4. <li>Тут подкатегория</li>
    5. <li>Тут подкатегория</li>
    6. </ul>
    7. </li>
    8. <li>Тут простой заголовок/пункт меню #2 </li>
    9. <li>Тут простой заголовок/пункт меню #3 </li>
    обращаем внимание на расстановку тегов <li> </li>, которыми "оборачивается" код выпадающего меню, то есть главная категория с подкатегориями не закрывается тегом сразу
     
  5. Анна Л.

    Анна Л. Новичок

    С нами с:
    2 май 2018
    Сообщения:
    3
    Симпатии:
    0
    И получилось блоком, типа так
    Rabbits Foxes Dogs Cats
    Submenu 1 Submenu 2 Submenu 3

    Выпадающего меню все равно не получилось.
     
  6. paschaopencart

    paschaopencart Активный пользователь

    С нами с:
    18 май 2018
    Сообщения:
    118
    Симпатии:
    16
    Адрес:
    Урал
    потому что теперь стоит верно прописать стили

    не знаю, можно ли тут размещать ссылки подобного рода, если что, пусть модераторы заранее простят...
    дам просто ссылку на мануал (который Вы и сами могли нагуглить)

    html5book.ru/vypadayushee-menu/

    читайте, учитесь, впитывайте полезное