hover over second level drop down menu issue

Bob Butcher
Bob Butcher used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
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?
Systems Development / Support Specialist
Commented:
I just made couple of changes like padding and margin your code and added third level menu
<!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:10px;
            font-size:12px;
            font-weight:bold;
            color:White;
            margin-top:5px;
            }
      .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:10px;
            width:170px;
            border-bottom:1px solid;
            }
      .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;
            }
            
            
   /* 3RD LEVEL DROP-DOWN MENU */
 
#navmenu ul ul
{
position: absolute;
top:0px; 
left:140px;
width:170px;
visibility:hidden;
	background:#922294;
	border-right: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
}

#navmenu ul li:hover ul{
visibility:visible;
}
                  
</style>
</head>
 <body bgcolor='#FFFFFF' style='margin-left:15px'> 
 <div class = "menu" style='background-color:#0c4d8e'>
   <ul  id="navmenu">
      <li>HOME</li>
       <li>PRODUCTS
           <ul>
               <li>Widget 1
               
               <ul>
                   <li>Widg 1</li>
                   <li>Widg 2</li>
               </ul></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>

Open in new window

Hope this helps
Bob ButcheriSeries Engineer

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial