Неправильное позиционирование подменю в Chrome

Question

Это то, что я хочу (и что работает в Firefox и IE).Изображение стрелки правильно расположено с правой стороны пункта меню:

Но вот как это выглядит в Chrome:

<div id="main-nav">
    <ul class="tabbed">
        <li><a href="#">Link 1 (submenu)</a><span></span></li>                       
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>
<div class="clearer">&nbsp;</div>    

<div id="sub-nav" style="display:none;">

    <ul class="tabbed">
        <li><a href="#">Sublink 1</a></li>
        <li><a href="#">Sublink 2</a></li>
        <li><a href="#">Sublink 3</a></li>
        <li><a href="#">Sublink 4 </a></li>
    </ul>

    <div class="clearer">&nbsp;</div>

</div>    

CSS

ul.tabbed li {
    list-style: none;
    margin-top: 0;
}

ul.tabbed {
    display: inline;
    margin: 0;
}

ul.tabbed li {
    float: left;
}

ul.tabbed li span { /*--Drop down trigger styles--*/
   width: 17px;
    height: 35px;
    float: right;
    background: url("button.gif") no-repeat;
}

ul.tabbed li span.subhover {
    background: url("button-hover.gif") no-repeat; 
    cursor: pointer;
} /*--Hover effect for trigger--*/

Здесь вы можете увидеть демо .

Я заметил, что добавление пустого тега img помогает в Chrome, но я не думаю, что это правильное решение.

<div id="main-nav">
<ul class="tabbed">
    <li><a href="#">Link 1 (submenu)</a><span></span> <img src="" /> </li> 

Answer 1

Вы можете попробовать это:

• Переместите <span></span> внутрь <a>.
• Отбросьте float с ul.tabbed li span.
• Добавьте display:inline-block к ul.tabbed li span и уменьшите height до 27px.

http://jsfiddle.net/ambiguous/ekZEw/

Возможно, вам придется немного поиграться с CSS, чтобы получить именно тот внешний вид, который вам нужен.

Я думаю, что перемещение интервала внутри элемента, к которому вы хотите присоединить его (якорь), даст более надежные результаты, чем что-либо еще.

Answer 2

Я немного подправил ваш код, и он работает (в Chrome): http://jsfiddle.net/u9NZn/3/.

Вот несколько изменений, которые я сделал:

ul.tabbed li span { /*--Drop down trigger styles--*/
    position: absolute;
    top: 0px;
    right: -1.5em;
    width: 17px;
    height: 35px;
    background: url("https://lh6.googleusercontent.com/_ds3R4wTBTl0/Tanu3Y5PHOI/AAAAAAAAAnU/STdJTpqNJHA/subnav_btn_top.gif") no-repeat;
}

ul.tabbed li {
    float: left;
    position: relative;
}

Демо: http://fiddle.jshell.net/u9NZn/3/show/