block ; inline ; inline-block problem

I have a javascript menu on my site but I’m having trouble getting the categories to display as I want them.

https://www.thelongclimb.com/#fragment-2

The template as was set up used the display:block attribute in the stylesheet to make the whole of the row selectable, so when you roll over something the whole row goes black (as you can still see in the ‘recent comments’ tab.

I wanted to add the number of posts to this though and the (n) showing the number of posts got stuffed down to the row below. I had to switch to display:inline to fix the problem but now only the category title highlights and is selectable, not the whole row as before.

How can I fix this please so the whole row is selectable.

Ideally, and if I can additionally ask, what I’d really like is a display similar to the ‘recent posts’ menu when you have the category name and then under that in a smaller font of a slightly darker colour ‘x posts, most recent xx-xx-xxxx’. But I have no idea how to do this despite some fiddling around.

The appropriate code is here…

<div id=”fragment-2″>
<ul class=”postListSingle”>

<?php wp_list_categories(‘sort_column=name&hierarchical=0&title_li=&show_count=1’); ?>

</div>

…and here’s the CSS…

.postListSingle {
/* padding:0; */
padding:5px 10px 6px 0px;
margin:0;
width:290px;
}
.postListSingle li {
list-style:none;
padding:5px 10px 6px 0px;
margin:0;
border-bottom:1px solid #424243;
}
.postListSingle a {
/* display:block; */
display:inline;
width:270px;
padding:8px 10px 8px 24px;
color:#fff;
text-decoration:none;
background:url(images/bullet.gif) no-repeat 5px 50%;
}
.postListSingle a:hover {
background:url(images/bullet-on.gif) no-repeat 7px 50% #000;
}

Hopefully you can help, thanks in advance.