1

I'm trying to work out a generic Responsive Menu for some websites that I'm helping with. I've got it working okay with JavaScript and I've got a CSS version that works fine if you don't have sub-menus. However, I'm trying to work out a responsive menu with just CSS that works fine with submenus.

So, the basic HTML/CSS for the page is:

  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">

    <style>
      /* Basic layout */
        body {background-color: grey;}
        nav {background: green; color: white;}
        /* Menu Icon */
        nav div.menu-icon {background: green url("menu.png") no-repeat; height: 32px; padding: 0px;}
        /* Menu lines */
        nav div ul {list-style-type: none; padding: 0px; /* Stops us getting a gap above */ margin: 0px;  /* Stops us getting a gap to the left */}
        nav div a:link {color: white; text-decoration: none;}       
        nav div a:visited {color: white; text-decoration: none;}           
        nav div a:hover {color: white; text-decoration: none; font-weight: bold;}       
        nav div a:active {color: white; text-decoration: none; font-weight: bold;}
        /* Indent sub-menus */
        nav div ul ul {padding-left: 1em;}
        nav div ul ul ul {padding-left: 2em;}
        nav div ul ul ul ul {padding-left: 3em;}
      /* End Basic layout */
    </style>

    <title>Menu Test</title>
  </head>
  <body>

    <nav id="MainMenu">
      <div class="menu-icon"></div>
      <div class="SideMenu">
        <ul>
          <li class = "has-sub">
            <a href = "#"> Submenu 1 >> </a>
            <ul>
              <li class = "is-link">
                <a href = "Menu1.html">Example Menu 1</a>
              </li>
                    <li class = "has-sub">
                    <a href = "#"> Submenu 2 >> </a>
                      <ul>
                  <li class = "is-link">
                    <a href = "Menu4.html">Example Menu 4</a>
                  </li>
                  <li class = "is-link">
                    <a href = "Menu5.html">Example Menu 5</a>
                  </li>
                        </ul>
                    </li>
            </ul>
          </li>           
          <li class = "is-link">
            <a href = "Menu2.html">Example Menu 2</a>
          </li>
          <li class = "is-link">
            <a href = "Menu3.html">Example Meun 3</a>
          </li>
        </ul>
      </div>    
    </nav>

  </body>

To make it responsive, I've added the following style block:

    <style>
      /* Drop-down menu */
        /* Hide the menu unless we're hovering over it */
        div.SideMenu {display:none;}
        div.SideMenu ul li ul li {display: none;}       

        /* Hover over the icon and display the menu */
        nav#MainMenu:hover div.SideMenu {display: block;}
        nav#MainMenu:hover div.SideMenu > ul {display: block;}
        div.SideMenu ul > li:hover > ul > li {display: block;}
      /* End Drop-down menu */  
    </style>

This almost works.

When I hover over the 'burger', the top-level menu drops down. when I hover over one of the 'parent' entries in the menu, the sub-menu drops down.

However when I move below the last of the sub-menu items, the whole menu collapses, meaning that I can never access Menu 2 or Menu 3.

I've tried all sorts of different approaches, but can't get this to work as I want.

Can anyone see what I've done wrong please?

Colin Middleotn
  • 29
  • 3
  • Just to clarify the key points. I can make it work with JavaScript, but making a CSS only version has become something of a battle of wills. All the sub-menus work, it's just those bottom two entries in the menu. – Colin Middleotn Jun 25 '15 at 11:59
  • I'm suspecting that the problem is when I transition from the last sub-menu to the next main-menu item, that I briefly move off the list tag, so the hover condition no-longer applies. – Colin Middleotn Jun 25 '15 at 12:01
  • I'm viewing this in Firefox ESR 31.4.0. – Colin Middleotn Jun 25 '15 at 12:01
  • Can you create a fiddle? https://jsfiddle.net/ – Mattia Nocerino Jun 25 '15 at 13:43
  • 1
    I created a [fiddle](https://jsfiddle.net/q6k1fcmb/) for anyone that comes across this. @ColinMiddleotn, your problem seems to be occurring when `Submenu 2` collapses. Once you get below it, `Submenu 1` also collapses since you're completely off of it causing the div to shrink enough that you aren't highlighting anything anymore so it collapses the rest of the way. I was able to get around this by adding more menu items at the top level. – Jon Jun 25 '15 at 17:42
  • Maybe if you could delay the transition, the menu won't collapse? You can't transition display: none; but [this](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) might help you. – Magnus Jun 26 '15 at 15:31
  • @Magnus, I've tried using the transition delay. The transition leaves a block, which I'm not happy with how that looks. Unfortunately you can't put a delay on display statements, which scuppers this plan. – Colin Middleotn Jun 28 '15 at 16:41
  • @JonB, Of course! It's really obvious when you point it out like that. Thank you. I guess I need to go and have a think now about the best way to stop it collapsing... – Colin Middleotn Jun 28 '15 at 16:54

0 Answers0