CSS Recreating UL LIs for clickable bullet images

Question

I am trying to create a true/natural CSS UL LI list (no JQuery, Javascript, etc), but I want to hide the list-style-type and use my own images for the bullets. Also, I want the bullets to be hyperlinked; this is why I am not using images within the LI tag. So, I am having trouble with recreating how a true UL LI would be have with indentation, etc. Here is my JS Fiddle: http://jsfiddle.net/zenfiddle/Z5pw4/2/

The 1st screenshot below is how my code currently looks. The 2nd screenshot below that is a hypothetical Photoshopped image of how I would like it to look. I would like to meet these ideas:

1.) The blue boxes need to be fluid

2.) The blue boxes need to sit next to the red box (like the last bullet in my 2nd screenshot)

3.) The bullet images are hyperlinked

4.) All will sit in a DIV (eg the yellow DIV) and the contents (LI text) will be fluid

Any ideas on how to fix? I am using a wrapper around each bullet image and bullet text. I am just not sure if I should use float:left, display:inline-block, clear:both; etc, etc.

Current

Problems:

• blue boxes are wrapping underneath the red box (I would like them to sit side by side)
• blue boxes are not extending to the full width of the container.

My Goal

Answer 1

There you go: http://jsfiddle.net/tomasdev/Z5pw4/9/

If you want the blue background on the bullet side, you can make a bigger image and remove the background position from anchor element.

You should keep it simple :

<div id="pagebox">

<ul>
    <li><a href="#" class="bullet"><em>My news topic</em></a>
        <ul>
            <li><a href="#" class="bullet">This is a short story</a></li>
            <li><a href="#" class="bullet">This is a longer story, yes it is</a><br></li>
            <li><a href="#" class="bullet">This is the longest story, I do declare, don't you agree?</a><br></li>
        </ul>
    </li>
</ul>

</div>
<style>
body,a {color:#fff; }
#pagebox { width:1300px; background:#ccc;  }
#pagebox li { line-height: 1.5em; list-style-type:none; }
#pagebox ul li img, ul li ul li img { vertical-align:text-bottom; }
#pagebox ul li ul{
    padding:0 0 0 20px;
}
.bullet { 
    background:#FF0000 url('http://images-4.findicons.com/files/icons/1689/splashy/16/bullet_blue.png') no-repeat 2px 5px;
    clear:left;
    display:block;
    float:left;
    padding:0 0 0 20px;
}
</style>

Answer 2

You don't need all those internal divs.... You can simply apply a class to the anchor for the bullet images. Also be aware, you can't assign the same ID to multiple items. Only one ID per page. No id should appear multiple times.

Updated fiddle -------> HERE