Пользовательское меню навигации CSS, без выпадающего списка

Question

Итак, у меня есть настраиваемое меню навигации, которое я пытаюсь сделать, и я не могу заставить его работать. Я включил и мой код, и код css. У меня есть 3 подменю, и при наведении на родителя они должны отображаться, но это не так.

Любые идеи?

Код HTML:

<div class="menu"> 
    <div class="menu-padder"> 
    <a href="">Item 1</a> 
    <a href="">Item 2</a> 
    <li class="submenu"> 
    <a href="">Subitem 1</a> 
    <a href="">Subitem 2</a> 
    </li> 
    <a href="">Item 3</a> 
    <li class="submenu"> 
    <a href="">Subitem 1</a> 
    <a href="">Subitem 2</a> 
    </li> 
    <a href="">Item 4</a> 
    <li class="submenu"> 
    <a href="">Subitem 1</a> 
    <a href="">Subitem 2</a> 
    </li> 
    <a href="">Item 5</a> 
    </div> 
    </div> 

CSS код:

.menu { 
    background-image: url('img/menu.jpg'); 
    width: 1000px; 
} 
.menu-padder { 
    padding:5px; 
} 
.menu a { 
    padding:5px; 
    color:white; 
    text-decoration:none; 
    font-weight:bold; 
} 
.menu a:hover { 
    padding:5px; 
    color:yellow; 
    text-decoration:none; 
} 
.submenu { 
    display:none; 
    padding:0px; 
} 
a:hover .submenu { 
    display:block; 
} 

Answer 1

это не правильный путь, чтобы создать меню, вам нужно изменить HTML и некоторые изменить в CSS:

DEMO

<div class="menu"> 
    <div class="menu-padder"> 
     <ul> 
      <li><a href="">Item 1</a></li> 
      <li> 
       <a href="">Item 2</a> 
       <ul class="submenu"> 
        <li><<a href="">Subitem 1</a></li> 
        <li><<a href="">Subitem 2</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="">Item 3</a> 
       <ul class="submenu"> 
        <li><<a href="">Subitem 1</a></li> 
        <li><<a href="">Subitem 2</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="">Item 4</a> 
       <ul class="submenu"> 
        <li><<a href="">Subitem 1</a></li> 
        <li><<a href="">Subitem 2</a></li> 
       </ul> 
      </li> 
      <li><a href="">Item 5</a></li> 
     </ul> 
    </div> 
</div> 

---

, но если вы хотите, чтобы ваш HTML просто использовать этот селектор:

a:hover + .submenu, .submenu:hover { 
    display:block; 
} 

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

.submenu { 
    display:none; 
    padding:0px; 
    position:absolute; 
    width:100%; /* or something else */ 
} 

DEMO

Answer 2

Вы не имеют <ul> HTML-код должен быть как

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Tutorials</a> 
      <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Articles</a> 
      <ul> 
       <li><a href="#">Web Design</a></li> 
       <li><a href="#">User Experience</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Inspiration</a></li> 
    </ul> 
</nav> 

и CSS, как

nav ul ul { 
    display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
} 

В коде попробовать это:

<ul> 
     <li><a href="">Item 1</a></li> 
     <li><a href="">Item 2</a></li> 
     <li class="submenu"> 
     <ul> 
      <li><a href="">Subitem 1</a></li> 
      <li><a href="">Subitem 2</a></li> 
     </ul> 
     </li> 
</ul> 

Answer 3

Вы можете использовать CSS смежный селектор:

a:hover + .submenu { 
    display:block; 
}