Полужирный текст не отображается на iPhone, но отображается на Android

Question

Итак, я пытаюсь получить все элементы в строке меню, чтобы выделить полужирным шрифтом. У меня есть несколько ссылок, в которых все работает нормально, но нет. В моем CSS есть переключатель: hover, чтобы изменить цвет фона кнопки, когда мышь нависает над каждым элементом. Существует один, который отличается, потому что это выпадающее меню, которое появляется, когда вы наводите на него курсор. Очевидно, что у него есть: селектор hover для отображения меню, когда он курсирует над ним, а также меняет цвет фона. Когда я просматриваю код в браузере на своем компьютере, он выглядит отлично. То же самое с просмотром на устройстве Android. Однако по какой-либо причине выпадающий элемент не выделен жирным шрифтом, когда я вытаскиваю его на iPhone. Я даже попробовал несколько браузеров на iPhone безрезультатно.

Вот мой HTML:

<div id="menu"> 
    <ul> 
    <li id="dropdown"><a href="#">Dropdown</a> 
     <ul> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     </ul></li> 
    <li><a href="#">Normal</a></li> 
    <li><a href="#">Normal</a></li> 
    </ul> 
</div> 

А вот мой CSS:

#menu { 
    margin: 0px; 
    padding: 10px 0px 10px 0px; 
    background-color: #A4C3FF; 
    width: 100%; 
    text-align: center; 
} 

#menu ul { 
    list-style: none; 
    margin: auto; 
    padding: 0; 
} 

#menu ul li { 
    display: inline; 
    padding: 5px 30px 5px 30px; 
    font-size: 28px; 
    color: white; 
    font-weight: bold; 
} 

#menu ul li:hover { 
    background:#325CBE; 
} 

#menu a:link, #menu a:visited { 
    color:white; 
    text-decoration:none; 
    font-weight: bold; 
} 

#dropdown a { 
    line-height: 40px; 
} 

#dropdown { 
    position:relative; 
} 

#dropdown ul { 
    display:none; 
    position:absolute; 
    top: 90%; 
    left: 0px; 
    background:#A4C3FF; 
    padding: 10px 0; 
} 

#dropdown:hover > ul { 
    display:block; 
} 

Так, потому что он прекрасно работает на все, кроме iPhone, я собираюсь предположить, что это проблема с iPhone не поддерживает селектор «hover» или что-то в этом роде (потому что только выпадающее меню не отображается жирным шрифтом). Если бы кто-нибудь мог объяснить мне, почему это не работает, и как это исправить, я бы очень признателен!

Answer 1

Мобильные устройства не имеют: зависает, потому что нет постоянного указателя , Другими словами, поскольку нет курсора мыши для активации состояния: hover, обычно активируются мобильные устройства: стили наведения на 1 касание и фактическая ссылка на 2-ое нажатие. Некоторые Android-устройства просто игнорируют состояние: hover и следуют по ссылке.

Если вы уточните свой вопрос, мы сможем дать лучший ответ.

Редактировать: Я поместил ваш код в JSFiddle для вас.
Это, кажется, работает отлично на iPhone - http://jsfiddle.net/6vn91t8d/

<div id="menu"> 
<ul> 
<li id="dropdown"><a href="#">Dropdown</a> 
    <ul> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    </ul></li> 
<li><a href="#">Normal</a></li> 
<li><a href="#">Normal</a></li> 

Answer 2

Для выпадающего списка вы можете использовать теги < .select> и < .option>. Тем не менее, люди также сообщили об ошибке, если устройство было взломанным. Вы пробовали тег < .b> вместо font-weight? Если это работает на других устройствах, это значит, что это «вероятно» проблема с iPhone. (Стоп-стопы должны быть проигнорированы внутри тегов)