CODEWITHSUNDEEP
htmlcsssafari
Ernest Poletaev
Ernest Poletaev

Reputation: 590

Safari <li> text changes width on hover

In Safari 10.0.3 (12602.4.8) simple unordered list items changes it's width if li element have on hover style

HTML:

<ul class="cc-menu">
  <li>Apple</li>
  <li>Orange</li>
  <li>Pineapple</li>
</ul>

CSS:

.cc-menu {
  display: inline-block;
  background: #000;
  color: #fff;
}
.cc-menu li:hover {
  color: #888;
}

Before hover:

enter image description here

After hover:

enter image description here

JsFiddle: https://jsfiddle.net/nresg4hr/

Is there any way to avoid such behaviour?

Upvotes: 1

Views: 249

Answers (2)

Ernest Poletaev
Ernest Poletaev

Reputation: 590

So far best workaround I've found is to declare own style for list items in css.

.cc-menu {
  display: inline-block;
  list-style: none; /* suppress browser list style */
  background: #000;
  padding: 0 0 0 24px;
  color: #fff;
}
.cc-menu li:hover {
	color: #888;
}
/* declare own list style */
.cc-menu li:before {
  content: '\2022';
  padding-right: 8px;
}
<ul class="cc-menu">
  <li>Apple</li>
  <li>Orange</li>
  <li>Pineapple</li>
</ul>

Upvotes: 2

fomsn
fomsn

Reputation: 41

try this style

.cc-menu {
  display: inline-block;
  background: #000;
  color: #fff;
}
.cc-menu li:hover {
  color: #888;
  display:block;
}

Upvotes: 0

Related Questions