CSS горизонтальные ссылки на меню - PullRequest
Новая
       22

CSS горизонтальные ссылки на меню

1 голос
/ 11 марта 2010

У меня есть простой (горизонтальный) список меню CSS с проблемой. Ссылки в списке активны только до определенного момента, например, четвертый пункт меню в моем списке не работает, 1, 2 и 3 в порядке. Не работая, я имею в виду, что действия «зависания» и гиперссылки исчезли.

Это как-то связано с атрибутами 'float' и 'overflow', если я не плаваю элемент #nav и не удаляю 'overflow: hidden', я могу заставить все ссылки работать, но форматирование облажается, в большей или меньшей степени, в зависимости от браузера.

Код ниже, любая помощь будет отличной. Да, и там были прокомментированы атрибуты 50% влево и вправо, потому что если бы я центрировал меню, ни одна из ссылок не работала: - (

<div id="nav">
<ul>
<li><a href="#" class="active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>


#nav
{
float: left;
height:30px;
width: 940px;
margin:0;
position: relative;
overflow: hidden;
white-space: nowrap;
font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
font-size: 20px;
font-weight: 200;
background-color: #333333;
list-style-type: none; 
}

#nav ul
{
margin:0;
padding-left: 0;
/*left: 50%;*/
}

#nav ul li
{
display: inline;
list-style: none;
padding: 2px 6px 2px 6px;
/*right:50%;*/
}

#nav ul li a 
{
float: left;
display: block;
display: inline;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

#nav li a:hover { color: #6698FF;}
#nav li a.active { color: #6698FF;}

Ответы [ 3 ]

0 голосов
/ 11 марта 2010

Попробуйте внести следующие изменения в свой CSS ниже. 

#nav ul li a 
{
float: left;
display: inline-block;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

#nav ul li a:hover, #nav ul li a.active 
{ 
  color: #6698FF;
}
0 голосов
/ 11 марта 2010

Я не уверен, что точно понимаю, как вы хотите, чтобы это выглядело. Но, исходя из «простого (горизонтального) списка меню CSS», я предполагаю, что вы ищете все ссылки, выстроенные в фоновом режиме?

Попробуйте это: 

  #nav {
    height:30px;
    width: 940px;
    margin:0;
    white-space: nowrap;
    font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 200;
    background-color: #333333;
  }

  #nav ul {
    margin:0;
    padding-left: 0;
    list-style: none; 
  }

  #nav ul li {
    float: left;
    display: inline;
    padding: 2px 6px 2px 6px;
  }

  #nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding:3px;
  }

  #nav li a:hover { color: #6698FF;}
  #nav li a.active { color: #6698FF;}

Все, что вам нужно сделать, это плавать li в любом направлении, в котором вы хотите. Для большей гибкости удалите height из #nav и верните overflow: hidden; на место. Таким образом, высота будет определяться содержанием: более твердый раствор.

Если вы хотите, чтобы список был в центре, внесите в него следующие изменения: 

  #nav ul {
    margin:0;
    padding-left: 0;
    list-style: none; 
    text-align: center;
  }

  #nav ul li {
    display: inline;
    padding: 2px 6px 2px 6px;
  }

  #nav ul li a {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    #display: inline;
    #vertical-align: auto;
    text-decoration: none;
    color: #ffffff;
    padding:3px;
  }

(весь этот мусор в #nav ul li a - это просто кросс-браузерный метод для надежных объявлений встроенных блоков)

0 голосов
/ 11 марта 2010

Стиль для #nav ul li a кажется странным: использование float:left с display:inline вызывает проблемы. Поскольку вы уже перемещаете родительский элемент (li), я не думаю, что вам нужно перемещать элемент a. Я не уверен, какой тип меню вы хотите получить, но обычно вы всплываете на языке ul li и отображаете: заблокируйте A внутри.

Итак, попробуйте изменить это: 

#nav ul li a 
{
float: left;
display: block;
display: inline;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

к этому 

#nav ul li a 
{
display: block;

text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}
...