title: Creating Submenu inside a submenu with css
body: <p>I am creating a navigation with a submenu inside a submenu but its not working properly. I already tried samples from the internet but when I am implementing it. I encounter some problems. I can't target the submenu properly. I am new to this and I hope you can help me on this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#cssmenu {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    font-size: 15px;
    line-height: 30px;
    text-align: left;
    height:40px;
    margin-left:100px;
    margin-top:10px;
  }
  #cssmenu &gt; ul {
    width: auto;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ece6e8;
    border-bottom: 3px solid #d9ced2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    width:450px;
    margin-left:930px;
  }
  #cssmenu &gt; ul li#responsive-tab {
    display: none;
  }
  #cssmenu &gt; ul li {
    display: inline-block;
    *display: inline;
    zoom: 1;
  }
  #cssmenu &gt; ul li.right {
    float: right;
  }
  #cssmenu &gt; ul li.has-sub {
    position: relative;
  }
  #cssmenu &gt; ul li.has-sub:hover ul {
    display: block;
  }
  /*border color*/
  #cssmenu &gt; ul li.has-sub ul {
    display: none;
    width: 250px;
    position: absolute;
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #ffffff;
    border: 1px solid #ece6e8;
    border-bottom: 1px solid #d9ced2;
    border-top: 0 none;
  }
  #cssmenu &gt; ul li.has-sub ul li {
    display: block;
  }
  
  #cssmenu &gt; ul li.has-sub &gt; a {
    background-image: url('images/caret.png');
    background-repeat: no-repeat;
    background-position: 90% -95%;
  }
  #cssmenu &gt; ul li.has-sub &gt; a.active,
  #cssmenu &gt; ul li.has-sub &gt; a:hover {
    background: #d80041 url('images/caret.png') no-repeat;
    background-position: 90% 195%;
  }
  #cssmenu &gt; ul li a {
    display: block;
    padding: 12px 24px 11px 24px;
    text-decoration: none;
    color: #747474;
    text-shadow: 0px 1px 0px #fff;
    background: #8f1941;
  }
  
  #cssmenu &gt; ul li a.active,
  #cssmenu &gt; ul li a:hover {
    background: #d80041;
    color: #fff;
    text-shadow: 0px 1px 0px #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='cssmenu'&gt;
      &lt;ul&gt;
          &lt;li class='has-sub'&gt;
              &lt;a href="#xl_xr_page_profile" target="_self" onclick="return(xr_nn());"&gt;&lt;span&gt;profile&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#xl_xr_page_departments" onclick="return(xr_nn());"&gt;&lt;span&gt;divisions&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href='xl_xr_page_admin%20&amp;amp;%20hr'&gt;&lt;span&gt;admin &amp; hr&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_finance'&gt;&lt;span&gt;finance&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_sales%20&amp;amp;%20marketing'&gt;&lt;span&gt;sales and marketing&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_i.t.'&gt;&lt;span&gt;i.t.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_operations'&gt;&lt;span&gt;operations&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_research%20&amp;amp;%20development'&gt;&lt;span&gt;research &amp; development&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_creative%20&amp;amp;%20technical'&gt;&lt;span&gt;creative &amp; technical&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_project%20management'&gt;&lt;span&gt;project management&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_production'&gt;&lt;span&gt;production&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#xl_xr_page_logistic%20&amp;amp;%20installation'&gt;&lt;span&gt;logistic &amp; installation&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;li&gt;&lt;a href="#xl_xr_page_facility" onclick="return(xr_nn());"&gt;&lt;span&gt;facility&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#xl_xr_page_partners" onclick="return(xr_nn());"&gt;&lt;span&gt;partners&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#xl_xr_page_clients" onclick="return(xr_nn());"&gt;&lt;span&gt;clients&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class='has-sub'&gt;
              &lt;a href="#xl_xr_page_business%20units" onclick="return(xr_nn());"&gt;&lt;span&gt;business units&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#xl_xr_page_signage%20&amp;amp;%20display" onclick="return(xr_nn());"&gt;&lt;span&gt;signage &amp; displays&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" onclick="return(xr_nn());"&gt;&lt;span&gt;traffic signs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" onclick="return(xr_nn());"&gt;&lt;span&gt;large format digital printing&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" onclick="return(xr_nn());"&gt;&lt;span&gt;architectural detailing &amp; fit-outs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" onclick="return(xr_nn());"&gt;&lt;span&gt;awards &amp; gifts&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" onclick="return(xr_nn());"&gt;&lt;span&gt;luxury &amp; hospitality accessories&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" onclick="return(xr_nn());"&gt;&lt;span&gt;engraving &amp; cutting services&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" onclick="return(xr_nn());"&gt;&lt;span&gt;electroplating services&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class='active' style="position: relative"&gt;&lt;a href="#xl_xr_page_news" onclick="return(xr_nn());"&gt;&lt;span&gt;news&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class='last' style="position: relative"&gt;&lt;a href="#xl_xr_page_contact%20us" onclick="return(xr_nn());"&gt;&lt;span&gt;contacts&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;     </code></pre>
  </div>
  </div>
      </p>
  
  <p>I really need help. Thanks!</p>