How can I create a horizontal HTML menu with a vertical submenu using CSS only?

Question

I want to design a Horizontal menu and onMouseover I want a vertical submenu to appear. I surfed a lot and found out some codes ,but when I execute, in almost all the codes I get the Horizontal menu properly but the submenus dont get displayed at all.

i am programming using ActivePerl 5.12 on Windows.

I am using IE7 for display, is that the reason why am not getting the proper result? Please do help me find the solution. Thank you.

Here's the piece of code which i was trying to execute..

  CSS style

  <style type="text/css">
   * {
       margin: 0;        
       padding: 0;
      }

   body {
      font-family: "Trebuchet MS", Helvetica, Sans-Serif;
      font-size: 14px;
         } 

    a  {
    text-decoration: none;
    color: #838383;
       }

    a:hover {
     color: black;
         }

     menu {
      position: relative;
      margin-left: 30px;
      }

     menu a {
      display: block;
      width: 140px;
          }

     menu ul {
       list-style-type: none;
       padding-top: 5px;
          }

      menu li {
       float: left;
       position: relative;
       padding: 3px 0;
       text-align: center;
       }

     menu ul.sub-menu {
       display: none;
       position: absolute;
       top: 20px;
       left: -10px;
       padding: 10px;
       z-index: 90;
        }

     menu ul.sub-menu li {
       text-align: left;
         }

     menu li:hover ul.sub-menu {
         display: block;
         border: 1px solid #ececec;
            }
      </style>

HTML Part

    <div id="menu">
    <ul>
          <li><a href="#">Home</a>
             <ul class="sub-menu">
                    <li><a href="#">Pages</a></li>
                    <li><a href="#">Archives</a></li>
                    <li><a href="#">New Posts</a></li>
                    <li><a href="#">Recent Comments</a></li>
            </ul>
          </li>

            <li><a href="#" >About</a>
                <ul class="sub-menu">
                    <li><a href="#">Get to know us</a></li>
                    <li><a href="#">Find out what we do</a></li>
                </ul>
            </li>

            <li><a href="#">Contact</a>
             <ul class="sub-menu">
                    <li><a href="#">E-mail Us</a></li>
                    <li><a href="#">Use Our Contact Form</a></li>
            </ul>
           </li>
     </ul>
   </div>

Answer 1

Firstly, if you have a choice, upgrade to IE8. IE7 really has no reason to be in use. :-) That said, IE7 should do what you want... just be aware that it has significant missing functionality, so it might make your life harder.

Secondly, your question says you've found some 'codes' (tutorials?), but you're not getting the results you want; it would help if you told us which tutorials you've used, or at least showed us some of the code that doesn't work, and tell us what problems you've had with it.

I will try to provide an answer, though...

Your question implies that you want to write a menu that is controlled only by CSS.

With that in mind, it doesn't really matter what language you use to generate the HTML, because your HTML should only need to consist of nested <ul> and <li> tags, with a few IDs or classes to tell your CSS where to apply its styles.

From that perspective, the Perl code (or any other language) shouldn't be particularly complex. The CSS may be complex, but that would be separate from your Perl code.

In CSS, the :hover style will allow you to build mouse-over drop-down functionality. No Perl (or Javascript) required. I'd suggest looking at the A List Apart site; it's a good site for CSS tutorials and has some very good examples of CSS-driven menus.