css size fix needed, please

i am trying to make a menu of sorts.

the code is available here: http://jsfiddle.net/Chumillas/WyA3U/ (thank you Chumillas for teaching me about this)

if you check the result via the link above, you will see that there is a design issue with this code - all visible menu items have to have the same length (75px) and this does not look beautify as the distances between them are uneven:

.titleCell
{
    width: 75px;

how can i fix it so that the length is actually that of the content (+padding) instead of having to fix it to 75px so that the distances between the menu items are THE SAME?

• edit --

if it can not be done, i would be happy with a link to a similar thing online. thnx again

• edit 2 --

if anyone wonders where i got this thing ori开发者_开发百科ginally from: http://www.devinrolsen.com/css-hide-and-display-content/

You can remove position:absolute from .titleCell strong and change the padding-left to padding-right with a bigger value, something such as 40px. Also remove the width from .titleCell

Here a demo: http://jsfiddle.net/ktCb8/

As an advise, don't apply rules for strong tag. Style the parent div or the parent li.

Although you've accepted an answer already I've made an update to your Fiddle with some layout fixes you might want to implement.

Have a look at: http://jsfiddle.net/WyA3U/3/

My two cents — cleaner/less of both worlds:

#contentBox { position: relative; font-size: 80%; }
#contentBox > li
{
    display: inline;
    padding: 6px;
    margin: 0 1px;
    cursor: pointer;
}
#contentBox > li:hover, #contentBox ul
{
    border: 1px solid #CCC;
    background-color: #FFF;
}
#contentBox > li:hover {
    border-bottom-color: #FFF;
    margin: 0;
}
#contentBox > li:hover ul
{
    display: block;
}
#contentBox ul
{
    position: absolute;
    display: none;
    border-width: 1px;
    width: 500px;
    padding: 6px;
    cursor: default;
    margin-top: 6px;
    z-index: -1;
}

<ul id="contentBox">
    <li>
        Go
        <ul>
            <li>
                <h1>
                    Quickly jump to your desired location
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Messages
        <ul>
            <li>
                <h1>
                    Access personal and system messages and alerts
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Assets
        <ul>
            <li>
                <h1>
                    Manage your assets
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Support
        <ul>
            <li>
                <h1>
                    Need help?
                </h1>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
        </ul>
    </li>
</ul>