HTML/CSS - Menus with sub-menus overlap

Asked

Viewed 170 times

1

Hello,

I have an application in Delphi that generates an HTML code from some register that the user does.

I mount a tree of menus and sub-menus in an HTML, however, when there are many menus in the main root, the sub-menus open behind the menus of the main root, it is not possible to navigate.

inserir a descrição da imagem aqui

The HTML code I got ready on the Internet. If you try to navigate through the "Menu 1" you will already notice my problem.

<style type="text/css">
 
ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}
ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}
 
ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}
.menu li{ float:left; width:auto; position:relative;}
.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }
 
.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px;   }
.menu ul.submenu-1 a{  width:160px; padding:0 20px; border-radius:5px;  }
 
.menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-2 a{  width:160px; padding:0 20px; border-radius:5px; }
 
.menu{background:#CCC; }
.menu a{ color:#000;}
.menu li:hover > a{ background:#999;  color:#fff;}
 
.submenu-1{ background:#999;}
.submenu-1 a{color:#fff;}
.submenu-1 li:hover > a{ background:#666; }
 
.submenu-2{ background:#666;}
.submenu-2 a{color:#fff;}
.submenu-2 li:hover > a{ background:#333; }

</style>
 
<ul class="menu"> 
    <li><a href="#">Menu 1</a>
        <ul class="submenu-1">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a>
                    <ul class="submenu-2">
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                        <li><a href="#">Submenu 6</a>
                                    <ul class="submenu-2">
                                            <li><a href="#">Submenu 7</a></li>
                                            <li><a href="#">Submenu 8</a></li>
                                            <li><a href="#">Submenu 9</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
        </ul>
    </li>		
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Menu 7</a></li>
    <li><a href="#">Menu 8</a></li>
    <li><a href="#">Menu 9</a></li>
    <li><a href="#">Menu 10</a></li>
    <li><a href="#">Menu 11</a></li>
    <li><a href="#">Menu 12</a></li>
    <li><a href="#">Menu 13</a></li>
    <li><a href="#">Menu 14</a></li>
    <li><a href="#">Menu 15</a></li>
    <li><a href="#">Menu 16</a></li>
    <li><a href="#">Menu 17</a></li>
    <li><a href="#">Menu 18</a></li>
    <li><a href="#">Menu 19</a></li>
    <li><a href="#">Menu 20</a></li>
</ul> 

1 answer

0


You need to put a z-index in the sub menu that way .submenu-1{ background:#999; z-index: 1;}

See working in the example below

ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}
ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}

ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}
.menu li{ float:left; width:auto; position:relative;}
.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }

.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px;   }
.menu ul.submenu-1 a{  width:160px; padding:0 20px; border-radius:5px;  }

.menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-2 a{  width:160px; padding:0 20px; border-radius:5px; }

.menu{background:#CCC; }
.menu a{ color:#000;}
.menu li:hover > a{ background:#999;  color:#fff;}

.submenu-1{ background:#999; z-index: 1;}
.submenu-1 a{color:#fff;}
.submenu-1 li:hover > a{ background:#666; }

.submenu-2{ background:#666;}
.submenu-2 a{color:#fff;}
.submenu-2 li:hover > a{ background:#333; }
 <ul class="menu"> 
          <li><a href="#">Menu 1</a>
              <ul class="submenu-1">
                  <li><a href="#">Submenu 1</a></li>
                  <li><a href="#">Submenu 2</a></li>
                  <li><a href="#">Submenu 3</a>
                          <ul class="submenu-2">
                              <li><a href="#">Submenu 4</a></li>
                              <li><a href="#">Submenu 5</a></li>
                              <li><a href="#">Submenu 6</a>
                                          <ul class="submenu-2">
                                                  <li><a href="#">Submenu 7</a></li>
                                                  <li><a href="#">Submenu 8</a></li>
                                                  <li><a href="#">Submenu 9</a></li>
                                          </ul>
                              </li>
                          </ul>
                   </li>
              </ul>
          </li>		
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
          <li><a href="#">Menu 6</a></li>
          <li><a href="#">Menu 7</a></li>
          <li><a href="#">Menu 8</a></li>
          <li><a href="#">Menu 9</a></li>
          <li><a href="#">Menu 10</a></li>
          <li><a href="#">Menu 11</a></li>
          <li><a href="#">Menu 12</a></li>
          <li><a href="#">Menu 13</a></li>
          <li><a href="#">Menu 14</a></li>
          <li><a href="#">Menu 15</a></li>
          <li><a href="#">Menu 16</a></li>
          <li><a href="#">Menu 17</a></li>
          <li><a href="#">Menu 18</a></li>
          <li><a href="#">Menu 19</a></li>
          <li><a href="#">Menu 20</a></li>
      </ul> 

Tip: Link with Mozilla documentation on z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Browser other questions tagged

You are not signed in. Login or sign up in order to post.