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

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

0 голосов
/ 19 октября 2010

Я использую этот код: 

#menu {
    margin: 0;
    padding: 0;
    display: block;
    overflow: auto;
}

#menu li {
    margin: 1px;
    padding: 0;
    float: left;
}

#menu li a {

    display: block;
    padding: 2px;
    padding-left : 15px;
    padding-right: 15px;
    
    font-family: "Tahoma";
    font-size: 18px;
    color: #8f8b20;
    text-decoration : none;
}

#menu li a:hover {

    background-color: #dad68c;
    
    padding: 2px;
    padding-left : 15px;
    padding-right: 15px;
}

#menu li a:active {
    color: #ffffff;
    background-color: #dad68c;
    
    padding: 2px;
    padding-left : 15px;
    padding-right: 15px;
}
<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Foods</a></li>
 <li><a href="#">Gallery</a></li>
 <li><a href="#">Site Map</a></li>            
 <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>

</ul>

Горизонтальное меню CSS, которое отлично работает на jsFiddle, но когда я использую его на своем сайте ... оно дает мне маркеры списка, см.изображение ниже ....

alt text

КАК ИЗБАВИТЬСЯ ОТ ЭТИХ ПУЛЕЙ

F1 F1

Помощь !!!

Любой ключ

Ответы [ 4 ]

5 голосов
/ 19 октября 2010

Изменить этот стиль: 

#menu li {
    margin: 1px;
    padding: 0;
    float: left;
}

Как это: (Вам не хватает list-style свойство) 

#menu li {
    margin: 1px;
    padding: 0;
    float: left;
    list-style:none; // this should remove the bullets
}

Подробнее:

3 голосов
/ 19 октября 2010

Вы пробовали стиль списка? 

ul {
      list-style: none;
      ...
      ...
}
2 голосов
/ 19 октября 2010

Вам необходимо переопределить стиль по умолчанию <li>, добавив list-style: none; к #menu.Добавление этого к #menu li будет иметь тот же эффект, но для этого потребуется 3 дополнительных символа.:)

Причина, по которой jsFiddle выглядит хорошо, заключается в том, что CSS, который они применяют ко всей странице, имеет для вас дело.

Подробнее о list-style-type и сокращение в стиле списка (используется выше).

2 голосов
/ 19 октября 2010

В коде CSS отсутствует правило для ul настройки list-style: none

...