Выпадающее меню разных уровней - PullRequest
Новая
       3

Выпадающее меню разных уровней

1 голос
/ 29 июня 2010

Я хочу создать выпадающее меню, в котором у меня есть 3 уровня, я выполнил типичную работу: когда я наводю курсор на основные элементы, я вижу элементы второго уровня.Теперь проблема в том, что я могу также видеть предметы третьего уровня, я стараюсь, чтобы предметы третьего уровня были видны только тогда, когда я наводил на них предметы второго уровня, чтобы сделать их лучше.Я взял код из http://www.alistapart.com/articles/horizdropdowns/ и изменил его.

Вот мой файл file.html 

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css_menu.css" />
  </head>
  <body>
   <div id="menu">
    <ul class="formato"> 
        <li class="n-dos"><a class="menu" href="#">Home</a></li> 
        <li class="n-dos"><a class="menu" href="#">About</a> 
          <ul class="test"> 
            <li class="n-tres"><a class="menu" href="#">History</a></li> 
                <ul class="variacion">
                    <li><a class="menu" href="#">Ejemplo_1</a></li>
                    <li><a class="menu" href="#">Ejemplo_2</a></li>
                </ul>   
            <li class="n-dos"><a class="menu" href="#">Team</a></li> 
            <li class="n-dos"><a class="menu" href="#">Offices</a></li> 
          </ul> 
        </li> 
        <li class="n-dos"><a class="menu" href="#">Services</a> 
          <ul class="test"> 
            <li class="n-dos"><a class="menu" href="#">Web Design</a></li> 
            <li class="n-dos"><a class="menu" href="#">Internet Marketing</a></li> 
            <li class="n-dos"><a class="menu" href="#">Hosting</a></li> 
            <li class="n-dos"><a class="menu" href="#">Domain Names</a></li> 
            <li class="n-dos"><a class="menu" href="#">Broadband</a></li> 
          </ul> 
        </li>
        <li  class="n-dos"><a class="menu" href="#">Contact Us</a> </li> 
      </ul>
    </div>
</body>
</html>

и мой CSS: 

.formato
{
    margin:0;
    padding:0;
    list-style-type:none;
}
.n-dos
{
    display:inline;
    background-color:black;
}
.n-tres
{
    display:inline;
    background-color:black;
}
.test
{
    position: absolute;
    left: 120px;
    top: 35px;
    display: none;
}
.variacion
{
    position: absolute;
    top: 30px;
    left: 120px;
    display: none;
    margin:0;
    padding:0;
    list-style-type:none;
}
.menu
{   
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000000;
    padding:0.3em 0.6em;
    text-align:center;
    width: 150px;
    font-family: 'Trebuchet MS';
}
li.n-dos:hover ul.test 
{ 
    display:inline;
}
li.n-tres:hover ul.variacion 
{ 
    display:block;
}

Ответы [ 2 ]

1 голос
/ 29 июня 2010

Я уверен, что вы не хотите устанавливать селекторы уровня элемента для этих вещей. С селекторами типа 

li ul 
{
    position: absolute;
    left: 120px;
    top: 35px;
    display: none;
}

и 

ul li a 
{   
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000000;
    padding:0.3em 0.6em;
    text-align:center;
    width: 150px;
    font-family: 'Trebuchet MS';
}

Ваши правила стиля слишком специфичны . Это то, с чем вы должны определенно обращаться с селекторами классов. Кстати, если вы не сделаете так, чтобы ваши теги привязки отображались: block, вы не будете получать такие правила, как ширина, отступы, выравнивание текста и т. Д.

0 голосов
/ 03 июля 2010

Наконец-то нашел ошибку, чувствую себя глупо, это был закрывающий тег li в неправильном месте.В файле HTML в строке: 

<li class="n-tres"><a class="menu" href="#">History</a></li>

не должно быть, так как этот элемент списка имеет подсписок внутри, поэтому он не показал, что элементы подсписка вызваны неправильной </li> было похоже, что в списке нет элементов

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...