Avatar of jagguy
jagguy
Flag for Australia asked on

menu doesnt show on hover

Hi,

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>
      <ul>
         
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
          
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>

Open in new window

CSSHTMLPHP

Avatar of undefined
Last Comment
jagguy

8/22/2022 - Mon
Gary

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

A slightly amended version of your code
http://jsfiddle.net/yY2VY/1/

...going only on what you posted.
jagguy

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

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.
rwheeler23
jagguy

ASKER
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 {
    position:relative;
}


yes left 99% was taken out

the code is from here.

http://cssmenumaker.com/blog/css-flyout-menu-starter-kit
Gary

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
jagguy

ASKER
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.

http://www.mymrt.net/hugh/home2.php

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.
ASKER CERTIFIED SOLUTION
Gary

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
or
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
jagguy

ASKER
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
http://www.mymrt.net/hugh/about.php
Gary

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

ASKER
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