CSS-навигация - первая привязка / кнопка в списке не работает, когда все остальные работают? - PullRequest
Новая
       11

CSS-навигация - первая привязка / кнопка в списке не работает, когда все остальные работают?

1 голос
/ 21 августа 2011

Я создал горизонтальную панель навигации, аналогичную той, которую я делал раньше. Необъяснимо, что первая ссылка не работает должным образом, но все остальные работают. Когда я перетаскиваю ссылку с помощью мыши, в первой кнопке две вещи различаются: курсор не меняется на руку, как во всех других ссылках / интерактивных элементах на странице, и эффект прокрутки не работает. РЕДАКТИРОВАТЬ: Вот ссылка на все соответствующие материалы: http://finchsbrasserie.com/NewSite/

HTML 

<div id="nav">
    <ul>
        <li id="bt1"><a href="#">Menus</a></li>
        <li id="bt2"><a href="#">Events</a></li>
        <li id="bt3"><a href="#">Farmer's Page</a></li>
        <li id="bt4"><a href="#">Hours and Location</a></li>
        <li id="bt5"><a href="#">Contact</a></li>
        <li id="bt6"><a href="#">About</a></li>
    </ul>
</div>

CSS 

#nav{
position:absolute;
top:0px;
left:410px;
width:520px;
height:100px;
}
#nav ul li {
display:block;
float:left;
height:100px;
position:relative;
border-right:1px solid #d6df22;
}
#nav ul li a{
background-image:url('NavSprite.png');
background-repeat:no-repeat;
text-indent:-9999px;
overflow:hidden;
display:block;
float:left;
list-style:none;
margin:8px;
position:relative;
top:60%;
}
#bt1 a{
width:44px;
height:10px;
background-position:0px 0px;
}
#bt2 a{
width:48px;
height:10px;
background-position:0px -40px;
}
#bt3 a{
width:96px;
height:10px;
background-position:0px -80px;
}
#bt4 a{
width:125px;
height:10px;
background-position:0px -120px;
}
#bt5 a{
width:62px;
height:10px;
background-position:0px -160px;
}
#bt6 a{
width:44px;
height:10px;
background-position:0px -200px;
}
#bt1 a:hover{
width:44px;
height:10px;
background-position:0px -20px;
}
#bt2 a:hover{
width:48px;
height:10px;
background-position:0px -60px;
}
#bt3 a:hover{
width:96px;
height:10px;
background-position:0px -100px;
}
#bt4 a:hover{
width:125px;
height:10px;
background-position:0px -140px;
}
#bt5 a:hover{
width:62px;
height:10px;
background-position:0px -180px;
}
#bt6 a:hover{
width:44px;
height:10px;
background-position:0px -220px;
}

Ответы [ 3 ]

1 голос
/ 22 августа 2011

Логотип нависает над меню, поэтому вы фактически не можете использовать первый пункт меню, даже если он виден. (логотип имеет прозрачный фон над ссылкой)

Это легко исправить, добавив в меню z-index: 

#nav{
    background: blue;
    position:absolute;
    top:0px;
    left:410px;
    width:520px;
    height:120px;
    z-index: 20;
}

Это должно исправить.

Хорошо, что вы разместили сайт, потому что это не имеет никакого отношения к меню tbh: p

0 голосов
/ 22 августа 2011

замените этот стиль на строчку 38 в файле mainstyle.css 

#nav {
height: 100px;
left: 410px;
position: absolute;
top: 0;
width: 520px;
z-index: 9999;

}

Установка z-index выше, чем логотип, решит проблему.

0 голосов
/ 22 августа 2011

Здесь все просто отлично работает с Chrome и IE. Хотя я считаю, что область зависания слишком мала.

Единственное, что я вижу, это шестой элемент, опускающийся на вторую строку, потому что div слишком узкий (или слишком широкий)).

...