Hi guys, I am working on this site and have managed to take care of everything except this ... When hovering over one of the categories in navigation menu, example; Exterior > RV Vents, the sub-sub menu that appears is not inline. It shows at the top, should be in line with the sub. Screenshot
Let's start at the beginning: If javascript is disabled, your nav menu is broken. That means your site is broken. A dropdown menu, as you're using does not require javascript. It is doable with css. For example: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1.5em;} p { font-size: 1em;} /* remove the default indent */ ul#top-menu, ul#top-menu ul { padding: 0;} ul#top-menu { list-style: none; text-align: center;} ul#top-menu li { border: 1px solid black; display: inline-block; padding: 0 1.5em; position: relative; text-align: left;} ul#top-menu li > ul { display: none; list-style: none; position: absolute; text-align: left; width: 100%;} ul#top-menu li:hover > ul { display: block; left: 0; top: 100%;} ul#top-menu li ul li > ul { display: none;} ul#top-menu li ul li:hover > ul { display: block; left: 100%; top: 0;} /*]]>*/ </style> </head> <body> <ul id="top-menu"> <li> ... </li> <li> ... </li> <li> Exterior ... <ul> <li> ... </li> <li> RV Vents... <ul> <li> ... </li> <li> Gilded... </li> <li> ... </li> </ul> </li> <li> ... </li> </ul> </li> <li> ... </li> </ul> </body> </html> Code (markup): cheers, gary ;;;; I hate this effing reply editor. It doesn't maintain my formatting in the code block. WTF isn't it pre-format and mono width font? Stupid! ~gt