title: HTML/CSS <ul> tag within <li> tag - Elements sitting around move
body: <p>"ul" tag within a "li" tag :</p>
  
  <pre><code>&lt;li data-role="dropdown"&gt;
      &lt;a href="#"&gt;
         Au sujet de
      &lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;Mon CV&lt;/li&gt;
          &lt;li&gt;
               &lt;a href="/personality"&gt;
                   Ma personnalit&amp;eacute;
               &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;Mes Hobbies&lt;/li&gt;
          &lt;li&gt;Mes formations&lt;/li&gt;
          &lt;li&gt;Mon mémoire&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>And the CSS properties for this code : </p>
  
  <pre><code>#mainMenu &gt; li &gt; ul {
      display:none;
  }
  
  #mainMenu &gt; li:hover &gt; ul {
      display:block;
      text-decoration:none;
      list-style-type:none;
      padding-left: 0px;
      padding-top:15px;
      z-index: 1500;
      background-color:#F2F2F7;
  }
  </code></pre>
  
  <p>When I'm hover the main 'li' tag, all the text around move.</p>
  
  <p>Does it exist a css property to prevent the mouvement of the different elements around the menu when I'm hover it ? Otherwise, does it exist another solution ? </p>
  
  <p>Thank you</p>