asked on

hover over second level drop down menu issue

I have code below for my page that allows when I hover over my menu option to produce a drop down and it works fine. What I am looking for is to have a secondary drop down menu. Example - below I'd like to have menu options underneath Widget 1 to break out into a secondary menu.

Could someone please show me how to do this and what to edit in the CSS and html please?

Thanks so much in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>New Web Site Test</title>

<style type = "text/css">
body{

}
.menu{
behavior: url("csshover3.htc");
      border:none;
      border:0px;
      margin:0px;
      font-family:Arial, Helvetica, sans-serif;
      font-size:10px;
      color:#8e8e8e;
      height:31px;
      overflow: hidden;
      }
.menu ul{
      height:0px;
      list-style:none;
      margin:0;
      padding:0;
      }
      .menu li{
            float:left;
            padding:0px 0px 0px 0px;
            }
      .menu li a{
            color:#666666;
            display:block;
            line-height:25px;
            padding:0px 0px;
            text-align:center;
            text-decoration:none;
            }
            .menu li a:hover{
                  color:#000000;
                  text-decoration:none;
                  }
      .menu li ul{
            background:#949494;
            border-left:0px solid #000000;
            border-right:0px solid #000000;
            border-bottom:0px solid #000000;
            display:none;
            height:auto;
            opacity:1;
            position:absolute;
            width:140px;
            z-index:100;
            }
      .menu li:hover ul{
            display:block;
            }
      .menu li li {
            display:block;
            float:none;
            padding:0px;
            width:170px;
            }
      .menu li ul a{
            display:block;
            font-size:10px;
            padding:0px 0px 0px 5px;
            font-family:Arial, Helvetica, sans-serif;
            text-align:left;
            color:#000000;
            }
            .menu li ul a:hover{
                  text-decoration:underline;
                  color:RGB(28, 28, 255);
                  opacity:1.0;
                  }
      .menu p{
            clear:left;
            }
      .menu #current{
            color:#ffffff;
            }

</style>
</head>
<body bgcolor='#FFFFFF' style='margin-left:15px'>
<div class = "menu" style='background-color:#0c4d8e'>
<ul>
<li>HOME</li>
<li>PRODUCTS
<ul >
<li>Widget 1</li>
<li>Widget 2</li>
</ul>
</li>
<li>ABOUT US
<ul >
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

LZ1

I wouldn't try to reinvent the wheel. There are plenty ready made scripts/menus out there that can do exactly what your doing.

Have you seen Suckerfish?

ASKER CERTIFIED SOLUTION

Anuradha Goli

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bob Butcher

ASKER

Thank you - that helps tremendously. I appreciate your help!