За последние 24 часа нас посетили 17743 программиста и 1621 робот. Сейчас ищет 1031 программист ...

почему не работает выпадающее меню

Тема в разделе "HTML и CSS", создана пользователем riaron, 15 апр 2015.

  1. riaron

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

    С нами с:
    1 окт 2014
    Сообщения:
    247
    Симпатии:
    4
    почему не выпадает список #menu1.
    Вот код.
    1.html
    Код (Text):
    1. <link rel="stylesheet" href="style.css" type="text/css"/>
    2. <ul id="menu">
    3.   <li class="kolonki"><a class="kolonki">Hello</a></li>
    4.   <li class="kolonki"><a class="kolonki">World</a>
    5.     <ul id="menu1">
    6.       <li>W</li>
    7.       <li>O</li>
    8.       <li>R</li>
    9.       <li>LD</li>
    10.     </ul>
    11.   </li>
    12.   <li class="kolonki"><a class="kolonki">DD!!!</a></li>
    13. </ul>
    style.css
    Код (Text):
    1. ul#menu li{
    2. position: relative;
    3. list-style-type: none;
    4. display:inline-block;
    5. float: left;
    6. }
    7. ul#menu1 li{
    8.  position: absolute;
    9.  left: -9999px;
    10. }
    11. ul#menu li.kolonki:hover #menu1 {
    12.  display: block;
    13.  left: 0;
    14.  }
     
  2. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    он выпадает где-то в районе минус девять тысяч девятьсот девяносто девяти пикселей. надо взять монитор побольше.
     
  3. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    В ебеня вы убираете ul#menu1 li, т.е. li, а возвращаете почему-то ul#menu li.kolonki:hover #menu1, т.е. menu1, а не li. И да, при таком раскладе, если вы будете возвращать li, они у вас сольются.

    Добавлено спустя 47 секунд:
    и это, автор. Это наркомания, честно тебе скажу.
     
  4. dcc0

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

    С нами с:
    27 июн 2014
    Сообщения:
    217
    Симпатии:
    4
    Многие любят ковырять вёрстку, делать именно свою, оригинальную, но почти все приходят к типовой.
    В чем смысл этого списка?
    Код (Text):
    1. <li>W</li>
    2.       <li>O</li>
    3.       <li>R</li>
    4.       <li>LD</li>
     
  5. riaron

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

    С нами с:
    1 окт 2014
    Сообщения:
    247
    Симпатии:
    4
    смысл кода в том,что ul #menu1 изначально находится на 999пикселей и при наведении на li.kolonki список ul #menu1 всплывает на своем месте.
    вот анологичный код нашел здесь http://dedushka.org/uroki/6425.html
    но не смог разобраться можете ли вы объяснить что делает строка
    Код (Text):
    1.  ul.dropdown li.dropdown-top:hover .dropdown-inside {
    2.  display: block;
    3.  left: 0;
    4.  }
    из css?
     
  6. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    ещё раз говорю, у вас не ul#menu1 на 999 уходит, у вас пункты LI уходят, а их вы НЕ ВОЗВРАЩАЕТЕ при ховере
     
  7. riaron

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

    С нами с:
    1 окт 2014
    Сообщения:
    247
    Симпатии:
    4
    Спосибо.
    а как сделать чтобы ul#menu1 ровно под World появлялось, есть какая то закавыка или потыкать с left-ом?
     
  8. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    В вашем случае - каждому ли присваивать идентификатор и указывать каждому ли свои отступы, ибо вы все ли позиционировали абсолютно:
    Код (Text):
    1. ul#menu1 li{
    2.  position: absolute;
    Что есть наркомания.
    Пробуйте позиционировать не ли, а ul#menu1.
     
  9. riaron

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

    С нами с:
    1 окт 2014
    Сообщения:
    247
    Симпатии:
    4
    код поменял как надо.
    Код (Text):
    1.  
    2. ul#menu li{
    3.     position: relative;
    4.     list-style-type: none;
    5.     display:inline-block;
    6.     float: left;
    7. }
    8. ul#menu1{
    9.  position: absolute;
    10.  left: -9999px;
    11. }
    12. ul#menu li.kolonki:hover ul#menu1 {
    13.  display: block;
    14.  left: -20;//здесь
    15.  }
    но меню menu1 появляется под DD!!, тыкаю c left ,когда ставлю left меньше -22 O сливается с R и получается:
    W
    OR
    LD
    почему так выходит? и что сделать, чтобы все работало.
     
  10. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    - Почему так выходит? - Потому что у вас float: left;
    - Что сделать, чтобы всё работало? - Переписать всё с нуля и нормально.
    Честно, тут нечего менять, почитайте лучше литературу и попробуйте снова с более обширными знаниями.