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