problem while creating button with many divs

Question

This is the menu I'm trying to build. Now I'm confused and can't figure out how to make it.

One div (blue arrow) needs negative margin to get outside the box, another div for blue button background and inside the button two another divs or spans for the text colors. But on hover they need to look same (white color).

I've tried many times to build it but i failed. I get some bugs while loading. Maybe it need any jquery code but I'm very new on it, and I have no idea what to do.

I'm working local and I can't give any link to show it, but there is an image of what I want to make.

I hope you understand me because my English is not good.

Answer 1

See: http://jsbin.com/ihugut

This works in all modern browsers, and IE8+ (it degrades reasonably in IE7).

(edit: it turned out that this must work perfectly in IE7, so see the end of my answer for that solution)

The one problem you might have is that because I aimed to keep the HTML as simple as possible, the CSS is complicated, so it could be difficult to make changes.

HTML:

<ol id="menu">
    <li><a href="#">Ballina g</a></li>
    <li><a href="#">Konferenca g</a></li>
    <li><a href="#">Folesit g</a></li>
</ol>

CSS:

body {
    margin: 50px;
    background: #aaa
}
#menu {
    list-style: none;
    counter-reset: num;
    background: #444;
    float: left;
    margin: 0;
    padding: 12px 0 0 0;
    font: bold 19px sans-serif
}
#menu li {
    margin: 0 0 12px 0;
    float: left;
    clear: both;

}
#menu a {
    counter-increment: num;
    padding: 3px 15px 3px 50px;
    float: left;
    position: relative;
    color: #0cf;
    text-decoration: none
}
#menu a:hover {
    color: #fff
}
#menu a:before {
    content: counter(num, decimal-leading-zero);
    color: #ccc;
    position: absolute;
    left: 21px;
    font-weight: normal
}
#menu a:hover:before {
    color: #fff;
}
#menu li:hover {
    background: #0cf;
    margin-left: -5px;
    margin-right: 5px
}
#menu li:hover a {
    left: 5px
}
#menu a:hover:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: -15px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 10px solid #0cf
}

---

Here's a version that works fully in IE7: http://jsbin.com/ihugut/3

The HTML had to be defiled:

<ol id="menu">
    <li><a href="#"><span>01</span>Ballina g<span class="arrow"></span></a></li>
    <li><a href="#"><span>02</span>Konferenca g<span class="arrow"></span></a></li>
    <li><a href="#"><span>03</span>Folesit g<span class="arrow"></span></a></li>
</ol>

Answer 2

It seems like you've got a good clue of what you want to do. If I understand correctly your problem is everything turning white on hover.

There should be one div that contains all the others, you can change its children on hover without using Javascript like so.

If you for example have this HTML:

<div class="parent">

    <span class="child_black">I'm black</span>
    <span class="child_red">I'm red</span>

</div>

You would use the following CSS to change the color of both children to white on hover:

.child_black {
    color: #000;
}

.child_red {
    color: #f00;
}

.parent:hover .child_black, .parent:hover .child_red {
    color: #fff;
}

http://jsfiddle.net/ptUkg/

You can use the same technique to show and hide the blue arrow on the left.

For just the color this would work too, but not for the arrow:
just for the sake of alternatives, I wouldn't recommend this

.parent:hover {
    color: #fff !important;
}