title: Navigation menus with css not showing up properly
body: <p>I am working on a navigation menu which should show next to its submenu text and image.  More like this as show in image below.</p>
  
  <p><img src="https://i.stack.imgur.com/Yuh94.png" alt="enter image description here"></p>
  
  <p>So far i am not able to get the desired results due to correct css property use.</p>
  
  <p>I have setup fiddle i hope some can help me with this. i have tried several different ways &amp; different example to make it working but it is not working so far. I have just wasted few days with it.</p>
  
  <p>So i am trying to keep it simple with the one i am working on now <a href="http://jsfiddle.net/Q42hN/5/" rel="nofollow noreferrer">Fiddle</a> </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
                      &lt;ul class="block"&gt;
                          &lt;li&gt;&lt;div class="div"&gt;This  block show some text and an image on the right side of the text &lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
                      &lt;ul class="block"&gt;
                          &lt;li&gt;&lt;div class="div"&gt;This  block show some text and an image on the right side of the text &lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                 &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
                      &lt;ul class="block-right"&gt;
                          &lt;li&gt;&lt;div class="div-right"&gt;This  block show some text and an image on the right side of the text &lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                 &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu3&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 5&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
                      &lt;ul class="block"&gt;
                          &lt;li&gt;&lt;div class="div"&gt;This  block show some text and an image on the right side of the text &lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
                      &lt;ul class="block"&gt;
                          &lt;li&gt;&lt;div class="div"&gt;This  block show some text and an image on the right side of the text &lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                 &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
                      &lt;ul class="block"&gt;
                          &lt;li&gt;&lt;div class="div"&gt;This  block show some text and an image on the right side of the text &lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                 &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><a href="https://stackoverflow.com/questions/18943666/menu-items-not-showing-up-properly-as-a-mega-menu">I also worked on this one but i am not able to fix it either posted two days back on stackoverflow</a>.</p>