Bold text not showing on iPhone but displays fine on Android


Tags: html,ios,css,css3,css-selectors

Problem :

So I'm trying to get all the items in my menu bar to be bolded. I have several links that all work fine, but one does not. In my CSS there is a :hover selector to change the color of the button's background when the mouse hovers over each item. There is one that is different because it is a dropdown menu that pops up when you hover over it. Obviously, it has a :hover selector to display the menu when it the mouse hovers over it, along with changing the background color. When I view the code in a browser on my computer, it comes out fine. Same with viewing on an Android device. However, for whatever reason the dropdown item isn't bolded when I pull it up on an iPhone. I've even tried multiple browsers on an iPhone to no avail.

Here is my 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>

And here is my 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;
}

So because it works fine on everything except the iPhone, I'm gonna guess that it's a problem with the iPhone not supporting the :hover selector or something (because only the dropdown does not show up bolded). If anybody could explain to my why it doesn't work and how to fix it I would very much appreciate it!



Solution :

Mobile devices don't have :hover states because there isn't a persistent pointer. In other words, since there's no mouse cursor to activate a :hover state, mobile devices will typically activate :hover styles on 1 tap and the actual link on a 2nd tap. Some Android devices will simply ignore the :hover state and follow the link.

If you clarify your question, we might be able to give a better answer.

Edit: I put your code into a JSFiddle for you.
It seems to work fine on an 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>


    CSS Howto..

    Django - how to collapse forms like in the django admin

    how to locate submenu elements (xpath, className or css locators)

    Portrait screen with 2 pages but only one of them should show

    How to add a disabled internal Style node to HTML5 DOM?

    How to code a scrolling frame in css

    If div is visible, than show that content in other div with jQuery

    how the rises up and down button is made?

    How do I add a logo into the nav bar in CSS?

    How do I get form-groups to overlap?

    How to separate content and presentation layers on JSPs?

    How to make responsive popup div?

    Devtools audit shows unwanted/injected css rules

    Is it possible to show webpage in a window from my Chrome extension, only using JS, HTML and CSS?

    How Can I Remove a Surrounding DIV with jQuery?

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    How to apply inline and/or external CSS loaded dynamically with jQuery

    How are new lines made with text as background?

    How to select multiple objects of a class for css manipulation

    How to make a sliding dashboard similar to medium.com? [closed]

    How to create an infinite easing in and out CSS animation loop?

    How to hide the information, just only show when button is clicked html, css. javascript?

    How to print text between css selectors in golang using html package?

    how to animate icon fa-circle using CSS to look as recording video blinking red dot?

    How do I place the text on the image in the header?

    How can I make DIVs within a display: table-cell fill the cell?

    Preload all CSS images while showing a preloader

    How can I use a different CSS using jQuery?

    How to change accordion css to plain white?

    How to make my PHP code, display in html table?

    How to add styling (CSS) to tags in Javascript/Jquery