Avatar of jagguy
Flag for Australia asked on

menu doesnt show on hover


This vertical flyout menu  doesnt dislpay the submenu on  desktop size when I hover over a link the submenu  doesnt  appear.
ul#vertmenu {padding: 0; margin: 0; border: 0;}
ul#vertmenu ul,
ul#vertmenu ul li, ul#vertmenu ul  {list-style: none; margin: 0; padding: 0; border: 0;}
ul#vertmenu ul {position: relative; z-index: 397;}
ul#vertmenu ul li {min-height: 1px; line-height: 1em; vertical-align: middle;}
ul#vertmenu ul li:hover {position: relative; z-index: 399; cursor: default;}
ul#vertmenu ul  {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 398; width: 100%;}
ul#vertmenu ul  {top: 0px; left: 99%;}
ul#vertmenu li:hover > ul { visibility: visible;}
ul#vertmenu ul  {top: 0px; left: 99%;}


<ul id="vertmenu" >
   <li><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>

Open in new window


Avatar of undefined
Last Comment

8/22/2022 - Mon

Code works fine as is, but the left:99% is a curious thing???

A slightly amended version of your code

...going only on what you posted.

Yes that works but the menu is for a responsive site so have absolute px on hover will cause problems?

Cannot say without seeing it in context but left 99% makes no sense either - that's throwing it off screen!
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

How do these 2 lines of code work because I cant how how li relative does anything?
ul#vertmenu ul  {top: 0px; left:80px} /* changed here */
/* added bit */
li {

yes left 99% was taken out

the code is from here.


Setting position:relative means your sub-menu is relative to the parent link (LI), else position absolute will be based on the next nearest relative element, if there isn't another relative item then it will be based on the body position

In the link you posted they have a set width on the parent UL,this means the sub menus are relative to this -1%,  your code does not have a set width on the parent UL

Sorry this doesnt work on a responsive website, I cant use this unless there is a fix.

I kind of thought there would be a issue as the absolute and px is used which got me very nervous.


if you resize the above link then the submenu appears off the main menu and this isnt correct.

Hover over about and see what happens when you resize before the screen is mobile size.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

Ok that works thanks but on mobile size the submenu doesnt appear.
I want all the submenus to appear on mobile size without being hidden.

when you resize and get the menu , no submenu appears

Now your problem is nothing to do with your original question.
You are relying on hover which doesn't 'exist' on touch phones.
On mobile devices you shouldn't be using hover (for better compatibility) and should instead attach a click event to the parent menu to show the sub menu.
But that is a whole different question and solution.

ok let me close this question and do another
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes