htmt list overlapping on iPad

Question

We have strange issue in iPad (iOS7) - see picture below:

On desktop and other devices it looks fine:

The list has very simple code:

<ul>
  <li><a href="#">Transitioning Veterans</a></li>
  <li><a href="#">Student Veterans</a></li>
  <li><a href="#">Guard &amp; Reserve</a></li>
</ul>

CSS:

ul {
  margin: 55px 1% 0 3%;
  width: 19%; //part of parent div
  padding: 0;
  float: left;
  display:block;
}
li {
  margin: 0;
  padding: 0 0 6px 0;
  position: relative;
  list-style: none;
  list-style-image: none;
}
a {
  display: inline-block;
  margin: 0;
  padding: 0 15px 0 0;
}

There is nothing special about that code, beside that it is inside container for sub-navigation that slideDown() (jQuery) when parent item is clicked.

Answer 1

See if changing the height of the li makes any difference like this, also add a border to any CSS this will tell you which element is incorrect

li {
  margin: 0;
  padding: 0 0 6px 0;
  position: relative;
  list-style: none;
  list-style-image: none; height:30px; border:1px solid black;
}

If it's not the height then try other values like top, bottom margins and padding

Good page to use for testing is here

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width

Answer 2

The position:relative in li tags caused li elements overlapping each other on iPad.