Image banner rotation arrow

Question

I am attempting to create an image banner rotation that will have "arrow" overlays when any of the 1 of 5 banners are selected. I have mocked up my divs and am unsure how to proceed. Should I make the Banner1-Banner5 descriptions as a UNORDERED LIST and LIST ITEMS and change the styles? Or keep them as seperate div's as I have done below? I'm also unclear how to make the "arrow" overlay when a certain banner description is selected. Image is below on how final banner should display. My framework code is also below.

    <!-- hp banner start -->
    <div id="hp-banner">

    <div id="hp-banner-left">
    BANNER IMAGE
    </div>

    <div id="banner-right">
    <div id="banner-right-1">
    BANNER 1 DESCRIPTION
    </div>

    <div id="banner-right-2">
    BANNER 2 DESCRIPTION
    </div>

    <div id="banner-right-3">
    BANNER 3 DESCRIPTION
    </div>

    <div id="banner-right-4">
    BANNER 4 DESCRIPTION
    </div>

    <div id="banner-right-5">
    BANNER 5 DESCRIPTION
    </div>


    </div>


    <!-- hp banner end -->
    </div>

Answer 1

While I agree with Billy Moat I think it's good to learn what css can do with a little extra knowledge.

The right hand menu should definitely be a list because that's exactly what it looks like.

I imagine the hardest part of this would be the arrows. It's actually really simple to do with css.

http://jsfiddle.net/Lddxooum/

HTML

<ul>
    <li>banner 1</li>
    <li>banner 2</li>
    <li>banner 3</li>
    <li>banner 4</li>
    <li>banner 5</li>
</ul>

CSS

div {
    float:left;
    width:200px;
    height:100px;
    background:orange;
}

ul {
    float:left;
    margin:0;
    padding:0;
}

li {
    list-style:none;
    line-height:20px;
    background:gray;
    position:relative;
}

li:hover {
    color:white;
    background:blue;
}

li:hover:before {
    content:'';
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:20px solid blue;
    position:absolute;
    right:100%;
    top:0;
}

The last css block is the one responsible for creating the arrow. You can make a lot of interesting shapes with just html and css.

https://css-tricks.com/examples/ShapesOfCSS/#triangle-up