Double sided horizontal css menu - css

Question

I'm trying to make a menu with definitions on the left and links on the right - but I can't get all the box to be a link. I could solve it with table I guess, but I hope there is a smoother solution.
So I want to float left one side of the line and right the other.
Here's my CSS:
li {
margin: 0px 10px 0px 100px;
padding: 30px 5px 0px 5px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
float: right;
color: black;
text-decoration: none;
}
And the HTML:
<ul>
<li>Blog#.blogspot.com</li>
<li>Twitter##</li>
<li>Google+Google+</li>
<li>Contact me##gmail.com</li>
</ul>
Or much better, here: http://jsfiddle.net/hJRdN/

Answer 1

It is done here on jsfiddle
just replace html and css as in js fiddle
<ul>
<li>Blog<span>#.blogspot.com</span></li>
<li><span>Twitter</span>##</li>
<li>Google+<span>Google+</span></li>
<li>Contact me<span>##gmail.com</span></li>
</ul>
CSS
li {
float:left;
width:400px;
margin: 0px 10px 0px 100px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
display:block;
padding: 30px 5px 0px 5px;
color: black;
text-decoration: none;
width:390px;
}
a span{ float:right}

Answer 2

Is it necesary to have unordered list? If not you could easily achieve that with just using floated divs.
<a href="#">
<div class="row">
<div class="left">blog</div><div class="right">blogspot.com</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="left">twitter</div><div class="right">twitter.com</div>
</div>
</a>
And css:
.row { width: 100%; float: left; }
.row:hover { background-color: #e3e3e3; }
.left { float: left; }
.right { float: right; }
.row .left { color: #000; }
.row .right { color: #000; }
Check out this fiddle: http://jsfiddle.net/dejvidpi/7a6mp/