创建具有许多div的按钮时出现问题

Question

这是我正在尝试构建的菜单.现在我很困惑,无法弄清楚如何制作它.

一个div(蓝色箭头)需要负边距才能进入框外,蓝色按钮背景需要另一个div,按钮内部需要两个div或跨越文本颜色.但在悬停时,他们需要看起来相同(白色).

我已多次尝试构建它,但我失败了.加载时我遇到了一些错误.也许它需要任何jquery代码,但我很新,我不知道该怎么做.

我在当地工作,我不能给任何链接显示它,但有一个我想做的图像.

我希望你理解我,因为我的英语不好.

Answer 1

请参阅： http: //jsbin.com/ihugut

这适用于所有现代浏览器和 IE8+（它在 IE7 中会合理降级）。

（编辑：事实证明这必须在 IE7 中完美工作，所以请参阅我对该解决方案的回答的结尾）

您可能遇到的一个问题是，因为我的目标是使 HTML 尽可能简单，但 CSS 很复杂，因此可能很难进行更改。

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
}

这是在 IE7 中完全运行的版本： http: //jsbin.com/ihugut/3

HTML 必须被破坏：

<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>