CSS: menu hover issue

Try putting the second level INSIDE the first one.

I dont follow, could you give me an example?

<div id="mainlevel">
   ....first level stuff...
   <div id="second level">
       ...second level stuff...
   </div>
</div>

the second level should be position:absolute; and probably start with display: none;

When you roll on the first visible level, the second will appear (according to the actual behaviour). The white should persist because you are "inside" the first level even when you move to the secon one

PS: the mainlevel and second level are single buttons and single sub-menus:
<div id="MENU">

<div id="A1">
   ....first level stuff...
   <div id="A2">
       ...second level stuff...
   </div>
</div>

<div id="B1">
   ....first level stuff...
   <div id="B2">
       ...second level stuff...
   </div>
</div>

...

</div> <!-- end menu -->

I'm using unordered lists, so i'm not sure how that would work?


I tried moving the level1 </div> tage to encompass the level two, but it didn't work.

Typo, *tag not tag

No matter if you are using div, ul or other. The important thing is that you look the mouseover (or css :hover) of the main level

pure CSS example

styles:
.level1 {}
.level2 { position: absolute; display: none; }
.level1:hover .level2 {display: block;}


html:
<div class="level1">
  I am the first level
  <ul class="level2">
    <li>I am in the second level</li>
    <li>me too</li>
  </ul>
</div>

<div class="level1">
  I am another first level
  <ul class="level2">
    <li>I am in the second level</li>
    <li>me too</li>
  </ul>
</div>

In you example you can't hover over the second level;

https://www.118business.com/admin/menubuilder/EE2.php

Ok I've had a go at using nested DIV's

https://www.118business.com/admin/menubuilder/EE3.php


How do i get the level2 and level3 to display in the same positions as they do here;

https://www.118business.com/admin/menubuilder/EE.php

The issue being level3 is below level2, i want them both to be at the top in a line

Thanks