Выпадающее меню CSS IE7 плавает влево

Question

Я сделал хорошее меню, а также написал новый дизайн только для IE. В IE7 текст рядом с изображением не идет рядом с ним. Это идет к следующей строке. Кто-нибудь знает, как это исправить?

http://tinyurl.com/6yzd2jc

Answer 1

Вы можете применить background-image к тегу привязки.

пример jsfiddle

Замените:

ul ul a div {float:left;display:block;width:7px;height:10px;background-color:transparent;padding:0;margin:0 5px 0 0;position:relative;top:3px;}
ul ul a:hover div {display:block;background-image:url(http://ctuchicago.squarespace.com/storage/jquery/dot.png);width:7px;height:10px;}

на:

ul ul a:hover {background:transparent url(http://ctuchicago.squarespace.com/storage/jquery/dot.png) no-repeat left center;}

Также увеличьте <a> левый отступ (с padding:3px 16px 3px 4px; до padding:3px 16px 3px 14px;)

ul ul li a {
    font-weight:normal;
    color: #FFF;
    padding:3px 16px 3px 14px;
}

и удалите пустые <div> s, вложенные в якоря

Answer 2

Почему вы используете div внутри тега a?

удалить div из тега a и применить стиль CSS background-image в теге a

Проверьте это http://jsfiddle.net/MNwD3/40/