Link to home
Avatar of jagguy
jagguyFlag 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 Gary
Flag of Ireland image

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.
Avatar of jagguy


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!
Avatar of jagguy


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
Avatar of jagguy


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.
Avatar of Gary
Flag of Ireland image

Blurred text
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of jagguy


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.
Avatar of jagguy


ok let me close this question and do another