title: Vertical circle navigation with animated submenus : CSS3 only?
body: <p>I'm creating a vertical navigation where list-items are circles. Sub-menu items should fly out from its parent.</p>
  
  <p>I have working code, but the code works only with a single sub-menu because it requires heavy use of the 'left' and 'top' properties to position submenu list-items. I bet this could look pretty with several more sub-menus, but it would require too much CSS customization per menu for my taste.</p>
  
  <p><a href="http://jsfiddle.net/na_ook/Px83f/" rel="nofollow"><strong>Working demo with 1 submenu.</strong></a><br></p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="/"&gt;Home Page&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;About&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Our History&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Our Philosophy&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Our Mission&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Our Team&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* Circle Menu */
  nav {
      width: 10em;
  }
  .menu a{
      display: block;
      padding:10px;
      width: 100%;
      height: 7.5em;
      border-radius: 750px 750px 750px 750px;
      -moz-border-radius: 750px 750px 750px 750px;
      -webkit-border-radius: 750px 750px 750px 750px;
      background-color: hsl(0, 100%, 72%);
      text-align: center;
      margin-bottom: 1em;
  }
  .menu li{
      margin-bottom: 1em;
      list-style: none;
  }
  .menu li ul{
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      opacity: 0;
      padding: 0;
  
      display: inline;
      top: -8em;
      position: fixed;
  }
  .menu li:hover ul{
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      padding: 0;
      opacity: 1;
  }
  .menu ul li a{
      width: 100%;
      background-color: hsl(0, 60%, 72%);
  }
  .menu li ul li {
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      position:relative;
      left:0;
  }
  .menu li:hover ul li {
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      position: relative;
      left: 190px;
  }
  .menu li ul li:nth-child(1) {
      top: 307px;
      left: 0px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li:hover ul li:nth-child(1) {
      top: 150px;
      left: 160px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li ul li:nth-child(2) {
      top: 153px;
      left: 0;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li:hover ul li:nth-child(2) {
      left: 240px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
      top: 150px;
  }
  .menu li ul li:nth-child(3) {
      top: -5px;
      left: 0;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li:hover ul li:nth-child(3) {
      top: 153px;
      left: 160px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  </code></pre>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/na_ook/b3ka7/1/" rel="nofollow"><strong>Demo that breaks because there are 2 submenus.</strong></a></p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="/"&gt;Home Page&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;About&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Our History&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Our Philosophy&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Our Mission&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Our Team&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Jim&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Karla&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Manzanita&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* Circle Menu */
  nav {
      width: 10em;
  }
  .menu a{
      display: block;
      padding:10px;
      width: 100%;
      height: 7.5em;
      border-radius: 750px 750px 750px 750px;
      -moz-border-radius: 750px 750px 750px 750px;
      -webkit-border-radius: 750px 750px 750px 750px;
      background-color: hsl(0, 100%, 72%);
      text-align: center;
      margin-bottom: 1em;
  }
  .menu li{
      margin-bottom: 1em;
      list-style: none;
  }
  .menu li ul{
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      opacity: 0;
      padding: 0;
  
      display: inline;
      top: -8em;
      position: fixed;
  }
  .menu li:hover ul{
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      padding: 0;
      opacity: 1;
  }
  .menu ul li a{
      width: 100%;
      background-color: hsl(0, 60%, 72%);
  }
  .menu li ul li {
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      position:relative;
      left:0;
  }
  .menu li:hover ul li {
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  
      position: relative;
      left: 190px;
  }
  .menu li ul li:nth-child(1) {
      top: 307px;
      left: 0px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li:hover ul li:nth-child(1) {
      top: 150px;
      left: 160px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li ul li:nth-child(2) {
      top: 153px;
      left: 0;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li:hover ul li:nth-child(2) {
      left: 240px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
      top: 150px;
  }
  .menu li ul li:nth-child(3) {
      top: -5px;
      left: 0;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  .menu li:hover ul li:nth-child(3) {
      top: 153px;
      left: 160px;
      -webkit-transition:all .35s ease-in;
      -moz-transition:all .35s ease-in;
      -o-transition:all .35s ease-in;
      transition:all .35s ease-in;
  }
  </code></pre>
  
  <p>Is it possible to create the effect I want for multiple submenus with only CSS but without needing to position each submenu item individually? Or will I need to employ JavaScript to 'automatically' position elements for me?</p>