CODEWITHSUNDEEP
hoversubmenu
Harlequin
Harlequin

Reputation: 389

Hover to Show Sub-Menu

How do I make a sub-menu appear when hovering over? I'm not seeing what's wrong with what I have - (but there's obviously something wrong since it doesn't work!)

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 - From the code so far it is suposed to show a menu when hovering over option "A".

Upvotes: 0

Views: 287

Answers (2)

Saurabh
Saurabh

Reputation: 1104

The below code should work.

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

The below code is to formatting and indentation.

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;
}

The sub-menu is still showing up on the page, so you would have to hide it:

ul.topmenu li ul {
  visibility: hidden; 
}

Then all you need is for the menu to appear when the user hovers over the enclosing list item:

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

Upvotes: 0

Lukasas
Lukasas

Reputation: 145

You have to have the submenu in that element, that will be linked with it:

<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>

Upvotes: 1

Related Questions