title: 3 layer li ul menu
body: <p>I want to create a 3 layer li ul menu but the 3 layer is covering the second layer. Can someone help me to align the 3 layer just right next to the second layer?</p>
  
  <p>I very much appreciate your comments!</p>
  
  <p>Best,
  W</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;HEAD&gt;&lt;title&gt;bla&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  ul {
  font-family : Arial, Verdana;
  font-size : 18px;
  font-weight: bold;
  margin : 0;
  padding : 0;
  list-style : none;
  z-index: -10;
  }
  ul li {
  display : block;
  position : relative;
  float : left;
  }
  li ul {
  display : none;
  position : relative;
  }
  ul li a {
  display : block;
  text-decoration : none;
  color : #ffffff;
  border-top : 0 solid #ffffff;
  padding : 6px 25px 6px 25px;
  background : #033a96;
  margin-left : 0;
  white-space : nowrap;
  }
  
  ul li a:hover {
  background : #9092c7;
  }
  li:hover ul {
  display : block;
  position : absolute;
  z-index: 10;
  }
  li:hover li {
  float : none;
  font-size : 14px;
  z-index: 10;
  }
  li:hover a {
  background : #9092c7;
  z-index: 10;
  }
  li:hover li a:hover {
  background : #033a96;
  z-index: 10;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  
  &lt;body &gt;
  
              &lt;TABLE  border=0 align="center" cellPadding=0 cellSpacing=0 valign="top"&gt;
                &lt;TBODY valign="top"&gt;
                &lt;TR valign="top"&gt;
  
               &lt;TD width="100%" bgcolor="#FFFFFF"&gt;
  
                   &lt;TABLE height=19 valign="top" cellSpacing=0 cellPadding=0 width="100%" border=0&gt;
                   &lt;tr&gt;
                   &lt;td height=35 bgcolor="#033a96" &gt; 
                   &lt;div id="menu_about" style="position: relative; z-index: 10;"&gt; 
                   &lt;ul id="menu"&gt;
                      &lt;li &gt;&lt;a class="link" href="index.htm" &gt;Layer 1&lt;/a&gt;
                      &lt;ul&gt;
                              &lt;li &gt;&lt;a href="#"&gt;Layer 2 blblb&lt;/a&gt;&lt;/li&gt;
                              &lt;li &gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                              &lt;ul &gt;
                                  &lt;li &gt;&lt;a href="#"&gt;Layer 3 Layer 3 Layer 3 Layer 3 &lt;/a&gt;&lt;/li&gt;
                                  &lt;li &gt;&lt;a href="#"&gt;Layer 3 Layer 3 Layer 3 Layer 3 &lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  
                      &lt;/li&gt;
  
  
                      &lt;li&gt;&lt;a class="link" href="#about" data-link="second"&gt;Layer 1&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li &gt;&lt;a href="#"&gt;Layer 2 blblb&lt;/a&gt;&lt;/li&gt;
                              &lt;li &gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                              &lt;ul &gt;
                                  &lt;li &gt;&lt;a href="#"&gt;Layer 3 Layer 3 Layer 3 Layer 3 &lt;/a&gt;&lt;/li&gt;
                                  &lt;li &gt;&lt;a href="#"&gt;Layer 3 Layer 3 Layer 3 Layer 3 &lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Layer 2&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
                  &lt;/div&gt;
                  &lt;/td&gt; 
                  &lt;/tr&gt;
                  &lt;/TABLE&gt;                  
  
              &lt;/TD&gt;
              &lt;/TR&gt;
              &lt;/TBODY&gt;
              &lt;/TABLE&gt;
  
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>