title: Pure CSS-made LavaLamp-effect: How to hold the LavaLamp on active menuitem?
body: <p>I use this pure CSS-made LavaLamp-effect and I'm almost happy with it:</p>
  
  <hr>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;&lt;a href="#"&gt;✿&lt;/a&gt;&lt;/li&gt;&lt;!--
  --&gt;&lt;li&gt;&lt;a href="#"&gt;Lorem&lt;/a&gt;&lt;/li&gt;&lt;!--
  --&gt;&lt;li&gt;&lt;a href="#"&gt;Ipsum&lt;/a&gt;&lt;/li&gt;&lt;!--
  --&gt;&lt;li&gt;&lt;a href="#"&gt;Consectetur adipisicing&lt;/a&gt;&lt;/li&gt;&lt;!--
  --&gt;&lt;li&gt;&lt;a href="#"&gt;Sit amet&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <h2><strong>CSS:</strong></h2>
  
  <pre><code>html{
  font-family:sans-serif;
  font-size:1.2em;
  background:#eee;
  }
  
  ul{
  position:relative;
  width:27em;height:2em;
  margin:100px auto;
  padding:0;
  white-space:nowrap;
  }
  
  ul li{
  display:inline;
  text-align:center;
  }
  
  ul li a{
  position:relative;
  top:0;left:0;right:25em;bottom:0;
  display:inline-block;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  padding:.4em .2em;
  color:#09C;
  text-decoration:none;
  text-shadow:0 1px 0 white;
  /*transition*/
  -webkit-transition:width .3s,right .3s;
     -moz-transition:width .3s,right .3s;
       -o-transition:width .3s,right .3s;
          transition:width .3s,right .3s;
  }
  
  ul li:nth-child(1) a{
  width:2em;
  }
  
  ul li:nth-child(2) a{
  width:4em;
  }
  
  ul li:nth-child(3) a{
  width:4em;
  }
  
  ul li:nth-child(4) a{
  width:12em;
  }
  
  ul li:nth-child(5) a{
  width:5em;
  }
  
  ul li:last-child a::after{
  content:"";
  position:absolute;
  right:inherit;
  bottom:-3px;
  width:inherit;
  height:3px;
  background:#ccc;
    pointer-events:none;
  /*transition*/
  -webkit-transition:all .5s ease;
     -moz-transition:all .5s ease;
       -o-transition:all .5s ease;
          transition:all .5s ease;
  }
  
  ul li:nth-child(1) ~ li:last-child a{
  right:25em;
  width:2em;
  }
  
  ul li:nth-child(2):hover ~ li:last-child a{
  right:21em;
  width:4em;
  }
  
  ul li:nth-child(3):hover ~ li:last-child a{
  right:17em;
  width:4em;
  }
  
  ul li:nth-child(4):hover ~ li:last-child a{
  right:5em;
  width:12em;
  }
  
  ul li:nth-child(5):last-child:hover a{
  right:0;
  width:5em;
  }
  
  ul li:hover ~ li:last-child a::after,
  ul li:last-child:hover a::after{
  background:#c351fa;
  }
  
  ul li:last-child a{
  min-width:5em;max-width:5em;
  }
  
  ul li a:hover,ul li a:focus{
  color:#c351fa;
  background-color:rgba(255,255,255,.6);
  /*transition*/
  -webkit-transition:width .3s,right .3s,background-color .3s;
     -moz-transition:width .3s,right .3s,background-color .3s;
       -o-transition:width .3s,right .3s,background-color .3s;
          transition:width .3s,right .3s,background-color .3s;
  }
  
  ul li a:focus{
  border-bottom:3px solid #c351fa;
  }
  </code></pre>
  
  <hr>
  
  <h2><strong>Example on JSFiddle.net:</strong></h2>
  
  <p><a href="https://jsfiddle.net/t397oojh/" rel="nofollow">Click to see the example above on JSFiddle.net</a></p>
  
  <hr>
  
  <p>Unfortunately, the LavaLamp jumps back to the origin menuitem when other menuitems are getting clicked and therefore be set to <em>.active</em>-state. How can I hold the effect placed at the current active menuitem (accordingly to the currently <em>.active</em>-child)?</p>
  
  <p>Thanks a lot for your help! :-)</p>