kentuckysob
New Member
This menu is a multi-level horizontal menu. I am trying to make a 3nd level submenu to become vertical (1st & 2nd level would stay as horizontal)So if I hover Products, it will list Harddrives, Monitors, and Speakers... horizontally. However, when I hover the Speakers, it now should list 10 Walt, 20 Walt... verticallly like a dropdown list.Can this be done? Please help.\[code\]<style> /** * horizontal navigation (SO) */ body { background: url('.jpg') 50% 50%; } /* Targeting both first and second level menus */ #nav {position: relative;} #nav li { list-style:none; float: left; } #nav li a { display: block; padding: 8px 12px; text-decoration: none; } #nav li a:hover { background-color:red; color:#FFF; opacity:1; } /* Targeting the first level menu */ #nav { top:150px; min-width:850px; background:#fff; opacity:0.5; display: block; height: 34px; z-index: 100; position: absolute; } #nav > li > a { } /* Targeting the second level menu */ #nav li ul { color: #333; display: none; position: absolute; width:850px; } #nav li ul li { display: inline; } #nav li ul li a { background: #fff; border: none; line-height: 34px; margin: 0; padding: 0 8px 0 10px; } #nav li ul li a:hover { background-color:red; color:#FFF; opacity:1; } /* Third level menu */ #nav li ul li ul{ top: 0; } ul.child { background-color:#FFF; } /* A class of current will be added via jQuery */ #nav li.current > a { background: #f7f7f7; float:left; } /* CSS fallback */ #nav li:hover > ul.child { left:0; top:34px; display:inline; position:absolute; text-align:left; } #nav li:hover > ul.grandchild { display:block; }</style><!-- content to be placed inside <body>