Question

I’m trying to style a shopping cart generated by a system so I can’t change the html code, and it this is how it generates the categories list:

<dl id='dlCatLvl1' class='clsCatLvl1 clsOffCat1'>
<dd class='clsCatTree1 clsCTree1' id=CatImg1>
    <a href='#'>Apparel</a>
    <dl id='dlCatLvl2' class='clsCatLvl2 clsOffCat2'>
        <dd class='clsCatTree2 clsCTree2' id=CatImg4><a href='#'>T-Shirts</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg5><a href='#'>Jackets</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg6><a href='#'>Hoodies</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg7><a href='#'>Polos</a></dd>
    </dl>
</dd>
<dd class='clsCatTree1 clsCTree1' id=CatImg2>
    <a href='#'>Novelties</a>
    <dl id='dlCatLvl2' class='clsCatLvl2 clsOffCat2'>
        <dd class='clsCatTree2 clsCTree2' id=CatImg8><a href='#'>Key Chains</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg9><a href='#'>Stationery</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg10><a href='#'>Umbrellas</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg11><a href='#'>Wristbands</a></dd>
    </dl>
</dd>
<dd class='clsCatTree1 clsCTree1' id=CatImg3>
    <a href='#'>Hats</a>
</dd>
</dl>

What I’m trying to accomplish is having the level 1 categories (Apparel, Novelties, Hats) and their respective level 2 categories be side-by-side instead of each level being on its own line.

I’m basically wanting it to look like this: http://jsfiddle.net/vUbuW/1/

I have no idea why they chose to build this so hideously, but this is what I have to work with.

Is this even possible with the current structure?

Thanks

Answer 1

You just need to rejig your CSS to match your HTML classes

.clsCatTree1{
    width: 120px;
    margin: 0 5px;
    padding: 10px;
    float: left;
    border: 1px solid black;
}

.clsCatTree1 > a{
    font-weight: bold;
    font-size: 1.2em;
}

Example: http://jsfiddle.net/vUbuW/2/

Fyi… In the second instance, .clsCatTree1 > a, you are saying style the a link that is the direct child of the dd.