title: horizontal menu and submenu with common border which must work in ie7 too
body: <p>I have some question around one horizontal menu, first of all let me show example what I want to reach <a href="https://www.mycleverphone.com/sergiu/Q/" rel="nofollow noreferrer">example</a>.</p>
  <ol>
  <li><p>Submenu must be aligned left with its parent but when I change at <code>#nav li{position:relative;}</code> its ignoring left floating and also submenu parent border from main menu what I can't remove.</p>
  </li>
  <li><p>Menu must have horizontal submenu without background but have border common with parent, liquid width of menu and submenu.</p>
  </li>
  <li><p>And what make this more difficult is what this one must work in IE7.</p>
  </li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul#nav {
    list-style: none;
    padding: 0;
    position: relative;
    display: block;
  }
  
  #nav li {
    float: left;
    padding: 6px 10px;
  }
  
  #nav li:hover {
    padding: 5px 9px;
    border: 1px solid #000000;
  }
  
  #nav li a {
    text-decoration: none;
    color: #09F;
  }
  
  #nav li:hover a {
    color: #000000;
  }
  
  #nav .submenu li a {
    color: #3F0;
  }
  
  #nav li .submenu {
    position: absolute;
    left: -9000px;
  }
  
  #nav li:hover .submenu {
    margin-top: 5px;
    left: -1px;
    border: 1px solid #000000;
  }
  
  .submenu ul {
    list-style: none;
    padding: 0;
    float: left;
  }
  
  body {
    /* added to show transparency */
    padding: 20px;
    background-color: #6d695c;
    background-image: repeating-linear-gradient(-30deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(30deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), linear-gradient(30deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1)), linear-gradient(-30deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1));
    background-size: 70px 120px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Primu&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Adoilea&lt;/a&gt;
      &lt;div class="submenu"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;submenu1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;sub2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;subtrei&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;subpatru&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;trei&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;patru&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;cinci&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>