I have the code below, it's a bit of a hotchpotch right now as I'm playing around to get my menu how I want. I've got it working pretty much how I want but there are two things bothering me.

1) My main nav bar width is set to around 20% of the viewport, so it'll expand between its minimum and maximum widths. So how do I ensure my mouseover menu <li>'s always popup to the right of the parent <li> as I can't set an absolute position as it'll change and it defaults to immediately below the parent <li> with no offset.

2) How do I set the parent <li> to stay at its hover state when I have the submenu open? Currently as soon as I move the mouse away from the parent <li> to the submenu <ul> it switches back to its natural state.

I'd like to accomplish both with js please! Ideas? :)

Quick idea of the position and what the news option currently does when I hover over the submenu:

Screenshot

And what the main nav looks like when hovering over it:

Screenshot2

ul.nav {
list-style: none;
margin-bottom: 0px;
border-top: 3px groove #093D51;
border-bottom: 3px groove #093D51;

}

ul.nav li {

}

/* MOUSE OVER MENU*/
ul.nav li ul {
display: none; 
list-style: none;
width: 150px;
z-index: 99;
font-size: .8em;

}

ul.nav li ul li {
border-bottom: 1px solid;
background-color: #CCC;

}

ul.nav li ul li a, ul.nav li ul li a:hover, ul.nav li ul li a:active, ul.nav li ul li a:focus {
background-color: #408080;
color: #E3BB5A;
background-image: none;
margin: 0px;
padding: 5px;
border: none;

}

ul.nav li ul li a:hover {
background-color: #CCC;
color: #408080; 

}

ul.nav li:hover ul {
display: block;
position: absolute;
left: 175px;

}

/* END OF MOUSOVER MENU */


ul.nav a, ul.nav a:visited {
padding: 3px 5px 3px 15px;
display: block;
text-decoration: none;
background: #E3BB5A  /*E3B37E*/;
background-image:url(/images/assets/but1b.png);
color: #274E5D;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
font-size: 12px;
border-left: 15px solid #956A3B;
border-right: 15px solid #956A3B;

}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus, ul.nav a.selected:hover{ 
background: #274E5D /*E3A15A*/;
background-image:url(/images/assets/but2.png);
color: #CCC;
border-left: 15px solid #956A3B;
border-right: 15px solid  #956A3B;

}

ul.nav a.selected {
background-image:url(/images/assets/but3.png);  
color: #274E5D;

}

1 answer

0
points

So how do I ensure my mouseover menu

  • 's always popup to the right of the parent
  • as I can't set an absolute position as it'll change and it defaults to immediately below the parent
  • with no offset.

  • You can set an absolute position if the parent is declared position:relative; You will need to ensure there's room for it in the viewport by setting margins or padding to make space.

    You don't need javascript for your fly-out menu, there are plenty of pure CSS solutions.

    What I would say though is that fly-out menus aren't as user friendly as people consider them to be and a lot of people find them difficult to use.

    Time spent in creating a better Information Architecture can negate the need for a fly-out menu.

    Answered over 6 years ago by Tony Crockford