Блог

Главная - Вопросы по программированию - неправильный рендеринг стиля css, возможная проблема с div?

неправильный рендеринг стиля css, возможная проблема с div?

#css #html

#css #HTML

Вопрос:

Я пытаюсь создать горизонтальный макет меню в CSS. Я использовал руководство, указанное здесь: http://www.devinrolsen.com/pure-css-horizontal-menu /

У меня есть файл css, который выглядит следующим образом, называется navigation.css:

 .navigation{
  width:100%;
  height:30px;
  background-color:lightgray;
}
.navigation ul {
  margin:0px;
  padding:0px;
}
.navigation ul li {
  display:inline;
  height:30px;
  float:left;
  list-style:none;
  margin-left:15px;
}
.navigation li a {
  color:black;
  text-decoration:none;
}
.navigation li a:hover {
  color:black;
  text-decoration:underline;
}
.navigation li ul {
  margin:0px;
  padding:0px;
  display:none;
}
.navigation li:hover ul {
  display:block;
  width:160px;
}
.navigation li li{
  list-style:none;
  display:block;
}

и на моей реальной странице php у меня есть это

 <div class="navigation">
  <ul>
    <li>
    <a href="#">something</a>
      <ul>
        <li><a href="./hello.php">Hello</a></li>
        <li><a href="./hello2.php">hello2</a></li>
      </ul>
    </li>
    <li>
    <a href="#">Browse database</a>
      <ul>
        <li><a href="./test.php">test</a></li>
        <li><a href="./test2.php">Test2</a></li>
        <li><a href="./search.php">Search</a></li>
      </ul>
    </li>
  </ul>
</div>

По причинам, которые я не могу определить, у них нет эффекта выпадающего меню. Следовательно, если я изменю навигацию на идентификатор вместо класса, заменив .navigation на #navigation, то ни один макет не повлияет на HTML.

Комментарии:

1. Выпадающий список, похоже, работает, смотрите это: jsfiddle.net/WaqjY

2. Я вырезал часть исходного кода из своего HTML, возможно, проблема кроется именно в этом.. Я оглянусь назад, спасибо

3. Есть ли у вас под вашим меню какой-либо контент, который может отображаться поверх выпадающего списка вашего меню?

4. Нет, на самом деле происходит то, что подменю (test, test2, hello, hello2) отображаются на странице даже без наведения на них курсора

5. Очень странно. Отлично работает в IE 7

Ответ №1:

На случай, если у вас все еще возникает проблема, вы пробовали изменить:

 .navigation li li{
  list-style:none;
  display:block;
}

Для:

 .navigation li li{
  list-style:none;
  display:none;
}
.navigation li:hover li{
  display:block;
}