title: Css How to add round corners when hover li element?
body: <p>I want to add round corners to a li element when hovered:</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li id="menufirst"&gt;
  &lt;span id="menu1"&gt;&lt;/span&gt;
  &lt;a href="#"&gt;Menu 1&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;span id="menu2"&gt;&lt;/span&gt;
  &lt;a href="#"&gt;Menu 2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;span id="menu3"&gt;&lt;/span&gt;
  &lt;a href="#"&gt;Menu 3 &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Example of want I want to archive: 
  <img src="https://i.stack.imgur.com/3gmTR.png" alt="enter image description here"></p>
  
  <p>I already have some CSS to make the menu horizontal.</p>