Jump to content
  • 0

Ошибка с выпадающим меню


Евгений_SB
 Share

Question

Ребят есть меню http://jsfiddle.net/ при наведении мыши  на пункт выпадающего меню оно пропадает, никак не пойму где ошибка

 

 

<nav>
        <ul>
            <li><a href="#">link</a>
               <ul>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
               </ul>
            </li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a>
              <ul>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
                   <li><a href="#">linc</a></li>
               </ul>
            </li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </nav>

 

 

 

* {
    margin:0px;
    padding: 0px;
}
nav {
    background: #eee;
    margin: 20px;
}

nav ul{
    list-style: none;
    position: absolute;

}

nav ul ul {
    display: none;
}
nav ul li:hover>ul{
    display:block;
    width: 110px;
    height: 40px;
}
nav ul li {
    background: #0086cf;
    display: inline-block;
    width: 110px;
    height: 40px;
    margin-top: 10px;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;
    border:1px solid #04537f;
}
nav ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: 14px Tahoma;
    color: #fff;
}

Edited by Евгений_SB
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

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