Наведите, чтобы показать подменю

Question

Как заставить подменю появляться при наведении курсора? Я не вижу, что не так с тем, что у меня есть - (но, очевидно, что-то не так, поскольку это не работает!)

HTML

<div>
  <ul>
    <li><a id="ALink" href="#">A</a></li>
      <ul id="SubMenu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    <li><a id="BLink" href="#">B</a></li>
    <li><a id="CLink" href="#">C</a></li>
  </ul>
</div>

CSS

#SubMenu {
display: none;
width: 200px;
height: 200px;
background: #00C;
}   

#ALink:hover #SubMenu {
  display: block;
    }

JSFiddle - На данный момент из кода предлагается показывать меню при наведении курсора на опцию "A".

Answer 1

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

<div>
  <ul>
    <li><a id="ALink" href="#">A
      <ul id="SubMenu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
     </a>
     </li>
    <li><a id="BLink" href="#">B</a></li>
    <li><a id="CLink" href="#">C</a></li>
  </ul>
</div>

Answer 2

Код ниже должен работать.

HTML

<ul class="topmenu">
  <li class="submenu">A
    <ul>
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
    </ul>
  </li>
  <li>B</li>
  <li>C</li>
</ul>

CSS

Ниже приведен код для форматирования и отступа.

ul.topmenu, ul.topmenu ul {
 display: block;
 margin: 0;
 padding: 0;
}

ul.topmenu li {
 display: inline;
 list-style: none;
 margin: 0;
 padding-right: 1.5em;
}

Подменю все еще отображается на странице, поэтому вам придется его скрыть:

ul.topmenu li ul {
  visibility: hidden; 
}

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

ul.topmenu li.submenu:hover ul {
  visibility: visible;
}