Проблемы с навигацией CSS-навигации

Возможно, проблема в том, что я сбрасываю. Его единственный выпадающий список, но мне не очень повезло с ним. Если я или пользователь, где можно покрыть категории, отобразится ниже «ul» вместе с его дочерними элементами «li» и «a». Однако это не работает. Наведение по категориям вызывает меню, но те, которые вы пытаетесь переместить мышь в меню, которое он скрывает.Проблемы с навигацией CSS-навигации

HTML компонент

<header role="header"> 
    <div class="frame"> 
     <nav role="navigation" class="bit-1"> 
      <ul> 
       <li> <a href="" class="brand">Tutor <span>Hive</span></a> 

       </li> 
       <li> <a href="#" class="cat">Categories</a> 

        <ul class="cat-drop"> 
         <li> <a href="/cat/all">All Categories</a> 
<a href="/cat/math">Math</a> 
<a href="/cat/biology">Biology</a> 
<a href="/cat/sciences">Sciences</a> 
<a href="/cat/chemistry">Chemistry</a> 
<a href="/cat/physics">Physics</a> 
<a href="/cat/business">Business</a> 
<a href="/cat/health">Health & Medicine</a> 
<a href="/cat/english">English</a> 
<a href="/cat/french">French</a> 
<a href="/cat/foreign">Foreign Languages</a> 
<a href="/cat/esl">ESL</a> 
<a href="/cat/literacy">Reading & Writing</a> 
<a href="/cat/computers">Computers</a> 
<a href="/cat/arts">Visual Arts</a> 
<a href="/cat/sports">Sports & Couching</a> 
<a href="/cat/preschool">Pre-school Education</a> 
<a href="/cat/music">Music</a> 
<a href="/cat/disability">Learning Disabilities</a> 
<a href="/cat/social">Social Studies</a> 
<a href="/cat/psychology">Psychology</a> 
<a href="/cat/religion">Religion</a> 

         </li> 
        </ul> 
       </li> 
       <div class="right_menu"> 
        <li> <a href="#region">Brampton</a> 

        </li> 
        <li class="sep"></li> 
        <li> <a href="#signin">Sign in</a> 

        </li> 
        <li> <a href="#signup" class="btn btn-signup">Sign up</a> 

        </li> 
       </div> 
      </ul> 
     </nav> 
    </div> 
</header>

CSS компонентов

header { 
    background: #fefefe; 
    padding: 16px 80px; 
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.65); 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 10000; 
    display: block; 
} 
nav { 
    padding: 20px 0; 
    text-transform: uppercase; 
    font-weight: 400; 
    letter-spacing: 0.06em; 
    display: block; 
} 
nav > ul { 
    margin: 18px 0; 
    list-style: none; 
} 
nav > ul > li { 
    display: inline-block; 
} 
nav > ul ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
} 
nav ul:after { 
    content:""; 
    clear: both; 
    display: block; 
} 
nav > ul > li:hover > ul { 
    display: inline; 
    background: transparent; 
    padding: 0px 80px; 
} 
nav > ul > li:hover > a.cat { 
    background: #F77036; 
    border-bottom: 2px solid #DD6430; 
    color: #fff; 
    border-radius: 3px; 
    transition: all 400ms; 
} 
nav > ul ul > li { 
    position: relative; 
    list-style: none; 
    margin: 16px 4px; 
    min-width: 400px; 
    display: block; 
} 
nav > ul ul > li > a { 
    color: #313131; 
    background: #fff; 
    border-bottom: 2px solid transparent; 
    padding: 15px 15px; 
    text-decoration: none; 
    display: inline-block; 
} 
nav > ul ul > li > a:hover { 
    background: #4b545f; 
} 
nav > ul > li > a, .right_menu > li > a { 
    color: #313131; 
    background: none; 
    border-bottom: 2px solid transparent; 
    padding: 15px 15px; 
    text-decoration: none; 
    border-radius: 3px; 
    transition: all 400ms; 
    outline: none; 
} 
nav > ul > li > a:hover, .right_menu > li > a:hover { 
    background: #F77036; 
    border-bottom: 2px solid #DD6430; 
    color: #fff; 
    border-radius: 3px; 
    transition: all 400ms; 
} 
nav > ul > li > a.active, .right_menu > li > a.active { 
    color: #fff !important; 
    font-weight: 600; 
} 
nav > ul > li > a.brand { 
    background: #CF4920; 
    border-bottom: 2px solid #BA411C; 
    color: #fff; 
    padding: 15px 15px; 
    text-decoration: none; 
    border-radius: 3px; 
    transition: all 400ms; 
    outline: none; 
    text-align: center; 
} 
nav > ul > li > a.brand:hover { 
    opacity: 0.8; 
    transition: all 400ms; 
} 
nav > ul > li > a.brand > span { 
    color: #fff; 
    border-left: 1px solid #fff; 
    padding: 0 4px; 
    font-family:'Permanent Marker', cursive; 
    font-weight: normal; 
} 
/* Navigation Right Menu */ 
nav > ul > .right_menu { 
    float: right; 
} 
nav > ul > .right_menu > li { 
    list-style: none; 
    display: inline-block; 
} 
nav > ul > .right_menu > li > a.btn-signup { 
    background: #A3D29C; 
    border-bottom: 2px solid #91BB8B; 
    color: #fff; 
    border-radius: 3px; 
    transition: all 200ms; 
} 
nav > ul > .right_menu > li > a.btn-signup:hover { 
    opacity: 0.8; 
    transition: all 200ms; 
} 
nav > ul > .right_menu > li.sep { 
    border-left: 1px solid #ddd; 
    width: 1px; 
    margin: -12px 2px; 
    padding: 16px 0; 
}

Вот JS Fiddle для сценария: http://jsfiddle.net/xrjN2/2/ и полный просмотр: http://jsfiddle.net/xrjN2/2/embedded/result/

источник

2013-09-19 0111010001110000

Вот это скрипку link с ниже скорректированным CSS ,

header { 
    background: #fefefe; 
    padding: 16px 80px; 
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.65); 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 10000; 
    display: block; 
} 
nav { 
    padding: 20px 0; 
    text-transform: uppercase; 
    font-weight: 400; 
    letter-spacing: 0.06em; 
    display: block; 
} 
nav ul { 
    margin:18px 0; 
    list-style: none; 
} 
nav ul li { 
    float:left; 
    margin-right:5px; 
    /*position:relative;*/ 
} 
nav ul li a, 
.right_menu li a { 
    color: #313131; 
    background: none; 
    border-bottom: 2px solid transparent; 
    padding: 15px 15px; 
    text-decoration: none; 
    border-radius: 3px; 
    transition: all 400ms; 
    outline: none; 
    } 

nav ul li a:hover, 
.right_menu li a:hover { 
    background: #F77036; 
    border-bottom: 2px solid #DD6430; 
    color: #fff; 
    border-radius: 3px; 
    transition: all 400ms; 
} 
nav ul li:hover a.cat, 
nav ul li.active a.cat { 
    background: #F77036; 
    border-bottom: 2px solid #DD6430; 
    color: #fff; 
    border-radius: 3px; 
    transition: all 400ms; 
} 
nav ul li a.active, 
.right_menu li a.active { 
    color: #fff !important; 
    font-weight: 600; 
} 
nav ul li a.brand { 
    background: #CF4920; 
    border-bottom: 2px solid #BA411C; 
    color: #fff; 
    padding: 15px 15px; 
    text-decoration: none; 
    border-radius: 3px; 
    transition: all 400ms; 
    outline: none; 
    text-align: center; 
} 
nav ul li a.brand:hover { 
    opacity: 0.8; 
    transition: all 400ms; 
} 
nav ul li a.brand span { 
    color: #fff; 
    border-left: 1px solid #fff; 
    padding: 0 4px; 
    font-family:'Permanent Marker', cursive; 
    font-weight: normal; 
} 
/* Navigation Right Menu */ 
nav ul .right_menu { 
    float: right; 
} 
nav ul .right_menu li { 
    list-style: none; 
    display: inline-block; 
} 
nav ul .right_menu li a.btn-signup { 
    background: #A3D29C; 
    border-bottom: 2px solid #91BB8B; 
    color: #fff; 
    border-radius: 3px; 
    transition: all 200ms; 
} 
nav ul .right_menu li a.btn-signup:hover { 
    opacity: 0.8; 
    transition: all 200ms; 
} 
nav ul .right_menu li.sep { 
    border-left: 1px solid #ddd; 
    width: 1px; 
    margin: -12px 2px; 
    padding: 16px 0; 
} 

nav ul:after { 
    content:""; 
    clear: both; 
    display: block; 
} 
/*----------------Drop menu starts----------------*/ 
nav ul li ul { 
    display:none; 
    position:absolute; 
    top:69px; 
    left:0; 
    background-color:#313131; 
    width:100%; 
    padding:15px; 
} 
nav ul li ul li a { 
    color:#313131; 
    background-color:#fff; 
    border:0; 
    border-radius:0px; 
    transition: all 0ms; 
    float:left; 
    margin:0 5px 5px 0; 
    } 
nav ul li ul li a:hover { 
    background:#4b545f; 
    border:0; 
    color: #313131; 
    border-radius:0; 
    transition: all 0ms; 
} 
nav ul li:hover ul { 
    display:block; 
}

источник

2013-09-19 06:20:17

Дополнительная информация о том, что вы обнаружили, и почему было бы хорошо –

Я не говорю, что было бы хорошо, я просто решу проблему @MemeCat. Это может быть полезно для него или не может быть. В любом случае, что я исправил, вы хотите знать. Просто следуйте правильному вопросу о MemeCat, что он/она хочет сказать по его/ее вопросу. Затем попробуйте сравнить его/ее css с моим css. –

@SwarnamayeeMallia благодарит за помощь. Из того, что вы в основном делаете, удаляются операторы OOCSS «>» и исправлены некоторые мои CSS. Это не совсем то, что мне нужно, но да. Я просто переписал все это с помощью мега-меню. См. Оригинальную навигацию не была написана мной, а моим другом, и я просто попытался построить сверху. Ошибка при этом. – 0111010001110000

вещь только U может сделать, это принести dropdo Меню шпа ближе к главному меню с помощью CSS

.cat-drop { 
    margin-top: -50px; 
}

события парить должен связать выпадающий класс меню также, как этого

$(document).ready(function() { 

$(".cat .cat-drop").hover(

function() { 
    $(".cat-drop").show(); 
}, 

function() { 
    $(".cat-drop").delay("400").hide(); 
}); 

});

http://jsfiddle.net/xrjN2/3/

источник

2013-09-19 05:25:29

Я знаю, что мой CSS является основной проблемой здесь. Но я не могу понять, что именно вызывает эту проблему. Ваше решение довольно аккуратное, но оно не исправляет начальную проблему, и я не хочу margin-top: -50px; добавлено. – 0111010001110000

Это потому, что когда мышь выходит из .cat, меню будет скрываться, так как вы указали, чтобы скрыть его в функции mouseout. $ (»Кошка-капля. ") Задержка (" 400") скрыть()..; –

Опять же, игра с моим CSS, кажется, исправит его, если я получу его правильно. Он не выглядит так, как должен. Поэтому я просматриваю свой CSS, который вызывает ошибку здесь, а не JS. – 0111010001110000

Проблемы с навигацией CSS-навигации

ответ

Смежные вопросы