title: List of circles with css
body: <p>I want to create an html/css list with css circles and text next to it (I don't want to use bullets for this).</p>
  
  <p>What I am trying to accomplish is here: <a href="http://jsfiddle.net/EGGVF/" rel="nofollow">http://jsfiddle.net/EGGVF/</a></p>
  
  <pre><code>.menu{ 
  position: relative;
  display: block;
  width:1em;
  height:1em;
  border-radius:50px;
  color:#fff;
  background:#000}
  </code></pre>
  
  <p>However, the circles appear on top of the list elements and not in line with them. How can I do this in a way that all is in line (bullet+circle+text)?</p>