title: CSS/HTML | Menu transition: Circle to square
body: <p>I try to make simple css-dropdownmenu. 
  My goal is to create a transition in which a dot transforms into a square if you hover over the main menu elements. With dot i mean a very small circle which cant be seen until hovered and then transforms into a square.
  My menu is already able to transform the square into a circle with differant color but I cant think of a way to do it vice versa, especially because the circle first has to be 'hidden' until hovered.</p>
  
  <p>Here is what i have so far:<a href="http://jsfiddle.net/eaqw4m38/3/" rel="nofollow">http://jsfiddle.net/eaqw4m38/3/</a></p>
  
  <p>HTML:
      
  
      
          
          
          
          Test</p>
  
  <pre><code>&lt;link href="css/main.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#s1"&gt;Menu 1&lt;/a&gt;
                  &lt;span id="s1"&gt;&lt;/span&gt;
                  &lt;ul class="subs"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Header a&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu I&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu II&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu III&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Header b&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu I&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu II&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu III&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#s2"&gt;Menu 2&lt;/a&gt;
                  &lt;span id="s2"&gt;&lt;/span&gt;
                  &lt;ul class="subs"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Header c&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu I&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu II&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu III&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Header d&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu I&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu II&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu III&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu 5&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I couldnt find anything via the search that fit my question.
  Thanks in advance for your answers :)
  Paul</p>
  
  <p>EDIT: I now know how to add such a circle and make it transparent but how do i add it to the transition? 
  The problem is that i have to objects: 1. the square of the menuelement
  2. the circle</p>
  
  <p>How do I anymate the circle when the square is hovered and moreover i have to keep the font on top of the circle</p>