title: Avoid mouse hover change in ul li menue
body: <p>I am using twitter bootstrap in order to have a select-option like list.</p>
  
  <p>I want to avoid that moving over the list items with the mouse changes the background of them. See screeshot:</p>
  
  <p><a href="https://i.stack.imgur.com/1uKUp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1uKUp.png" alt="screenshot"></a></p>
  
  <p>In the following is the code visible. It will be the easiest to have a look at the jsfiddle:</p>
  
  <p><a href="https://jsfiddle.net/qqnkc9u3/3/" rel="nofollow noreferrer">https://jsfiddle.net/qqnkc9u3/3/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
  &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
      D2ropdown
  &lt;/button&gt;
  &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
      &lt;li&gt;&lt;a class="my2" href="#"&gt;&lt;!--data-value="action"--&gt; Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="my2" href="#" data-value="another action"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="my2" href="#" data-value="something else here"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="my2" href="#" data-value="separated link"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>js:</p>
  
  <pre><code>$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' &lt;span &gt;&lt;/span&gt;');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
  });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>@charset "UTF-8";
  
  @import url('https://fonts.googleapis.com/css?family=PT+Sans');
  
  #dropdownMenu1 {
  /*text-indent: -150px;*/
  -webkit-appearance: none;
  -moz-appearance: none;
  
  font-family: 'PT Sans', sans-serif;
  /*font-style: italic;*/
  color: red;
  font-size: 18px;
  text-align: left;
  
  width: 242px;
  height: 42px;
  border: 4px;
  /*background-color: #e7eaf3;*/
  background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
  /*color: #5B629B;*/
  /*padding: 4px;*/
  }
  
  .my2 {
  text-indent: -7px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  
  font-style: italic;
  font-family: 'PT Sans', sans-serif;
  color: red;
  font-size: 18px;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 242px;
  height: 42px;
  /*border: 4px;*/
  /*color: #5B629B;*/
  background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
  }
  </code></pre>