Overflow that only shows up when hovering inside a list
I've been trying to get a overflow box to show up only when hovering over inside a certain part of the text inside a list. It works, but for some reason it makes the other li disappear. This is my code:
#firstid {
text-decoration: underline;
color: olivedrab;
}
#secondid {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#firstid:hover~#secondid {
display: block;
}<ol>
<li>
<a id="firstid">Text</a>
<a id="secondid">Text</a>
</li>
<li>Text</li>
</ol>It works correctly, but what should come after that in my list disappears. It's probably because of some stupid mistake, but I've been stuck on that for a while and couldn't find the answer online. Any help would be really apreciated appreciated (:
html css
|
show 1 more comment
I've been trying to get a overflow box to show up only when hovering over inside a certain part of the text inside a list. It works, but for some reason it makes the other li disappear. This is my code:
#firstid {
text-decoration: underline;
color: olivedrab;
}
#secondid {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#firstid:hover~#secondid {
display: block;
}<ol>
<li>
<a id="firstid">Text</a>
<a id="secondid">Text</a>
</li>
<li>Text</li>
</ol>It works correctly, but what should come after that in my list disappears. It's probably because of some stupid mistake, but I've been stuck on that for a while and couldn't find the answer online. Any help would be really apreciated appreciated (:
html css
1
Should those</div>be</a>instead? That looks like it could cause unpredictable behavior.
– Aaron Klein
Nov 26 '18 at 2:30
Your code wasn't syntactically correct and I've corrected it - I also put it into an embed that run directly in the post.
– dwjohnston
Nov 26 '18 at 2:32
1
@dwjohnston, you should refrain from fixing code in questions, especially if the errors you fix are part of the problem. You basically provide the answer inside the question which doesn't help anyone. Most times it doesn't help OP and it certainly doesn't help future users with a similar problem. Providing the answer and explaining the principle is a lot better than modifying the question which will likely be reverted because you modified its meaning.
– Andrei Gheorghiu
Nov 26 '18 at 2:36
How much space is there for theol? With the second li moving 110 pixels away it's possible that it's out of view, maybe not visible at all depending on the context.
– Quinn Mortimer
Nov 26 '18 at 2:37
@AndreiGheorghiu if you're going to roll back to the incorrect HTML then atleast put it into the snippet.
– dwjohnston
Nov 26 '18 at 2:41
|
show 1 more comment
I've been trying to get a overflow box to show up only when hovering over inside a certain part of the text inside a list. It works, but for some reason it makes the other li disappear. This is my code:
#firstid {
text-decoration: underline;
color: olivedrab;
}
#secondid {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#firstid:hover~#secondid {
display: block;
}<ol>
<li>
<a id="firstid">Text</a>
<a id="secondid">Text</a>
</li>
<li>Text</li>
</ol>It works correctly, but what should come after that in my list disappears. It's probably because of some stupid mistake, but I've been stuck on that for a while and couldn't find the answer online. Any help would be really apreciated appreciated (:
html css
I've been trying to get a overflow box to show up only when hovering over inside a certain part of the text inside a list. It works, but for some reason it makes the other li disappear. This is my code:
#firstid {
text-decoration: underline;
color: olivedrab;
}
#secondid {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#firstid:hover~#secondid {
display: block;
}<ol>
<li>
<a id="firstid">Text</a>
<a id="secondid">Text</a>
</li>
<li>Text</li>
</ol>It works correctly, but what should come after that in my list disappears. It's probably because of some stupid mistake, but I've been stuck on that for a while and couldn't find the answer online. Any help would be really apreciated appreciated (:
#firstid {
text-decoration: underline;
color: olivedrab;
}
#secondid {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#firstid:hover~#secondid {
display: block;
}<ol>
<li>
<a id="firstid">Text</a>
<a id="secondid">Text</a>
</li>
<li>Text</li>
</ol>#firstid {
text-decoration: underline;
color: olivedrab;
}
#secondid {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#firstid:hover~#secondid {
display: block;
}<ol>
<li>
<a id="firstid">Text</a>
<a id="secondid">Text</a>
</li>
<li>Text</li>
</ol>html css
html css
edited Nov 26 '18 at 2:48
ElDudo
asked Nov 26 '18 at 2:18
ElDudoElDudo
63
63
1
Should those</div>be</a>instead? That looks like it could cause unpredictable behavior.
– Aaron Klein
Nov 26 '18 at 2:30
Your code wasn't syntactically correct and I've corrected it - I also put it into an embed that run directly in the post.
– dwjohnston
Nov 26 '18 at 2:32
1
@dwjohnston, you should refrain from fixing code in questions, especially if the errors you fix are part of the problem. You basically provide the answer inside the question which doesn't help anyone. Most times it doesn't help OP and it certainly doesn't help future users with a similar problem. Providing the answer and explaining the principle is a lot better than modifying the question which will likely be reverted because you modified its meaning.
– Andrei Gheorghiu
Nov 26 '18 at 2:36
How much space is there for theol? With the second li moving 110 pixels away it's possible that it's out of view, maybe not visible at all depending on the context.
– Quinn Mortimer
Nov 26 '18 at 2:37
@AndreiGheorghiu if you're going to roll back to the incorrect HTML then atleast put it into the snippet.
– dwjohnston
Nov 26 '18 at 2:41
|
show 1 more comment
1
Should those</div>be</a>instead? That looks like it could cause unpredictable behavior.
– Aaron Klein
Nov 26 '18 at 2:30
Your code wasn't syntactically correct and I've corrected it - I also put it into an embed that run directly in the post.
– dwjohnston
Nov 26 '18 at 2:32
1
@dwjohnston, you should refrain from fixing code in questions, especially if the errors you fix are part of the problem. You basically provide the answer inside the question which doesn't help anyone. Most times it doesn't help OP and it certainly doesn't help future users with a similar problem. Providing the answer and explaining the principle is a lot better than modifying the question which will likely be reverted because you modified its meaning.
– Andrei Gheorghiu
Nov 26 '18 at 2:36
How much space is there for theol? With the second li moving 110 pixels away it's possible that it's out of view, maybe not visible at all depending on the context.
– Quinn Mortimer
Nov 26 '18 at 2:37
@AndreiGheorghiu if you're going to roll back to the incorrect HTML then atleast put it into the snippet.
– dwjohnston
Nov 26 '18 at 2:41
1
1
Should those
</div> be </a> instead? That looks like it could cause unpredictable behavior.– Aaron Klein
Nov 26 '18 at 2:30
Should those
</div> be </a> instead? That looks like it could cause unpredictable behavior.– Aaron Klein
Nov 26 '18 at 2:30
Your code wasn't syntactically correct and I've corrected it - I also put it into an embed that run directly in the post.
– dwjohnston
Nov 26 '18 at 2:32
Your code wasn't syntactically correct and I've corrected it - I also put it into an embed that run directly in the post.
– dwjohnston
Nov 26 '18 at 2:32
1
1
@dwjohnston, you should refrain from fixing code in questions, especially if the errors you fix are part of the problem. You basically provide the answer inside the question which doesn't help anyone. Most times it doesn't help OP and it certainly doesn't help future users with a similar problem. Providing the answer and explaining the principle is a lot better than modifying the question which will likely be reverted because you modified its meaning.
– Andrei Gheorghiu
Nov 26 '18 at 2:36
@dwjohnston, you should refrain from fixing code in questions, especially if the errors you fix are part of the problem. You basically provide the answer inside the question which doesn't help anyone. Most times it doesn't help OP and it certainly doesn't help future users with a similar problem. Providing the answer and explaining the principle is a lot better than modifying the question which will likely be reverted because you modified its meaning.
– Andrei Gheorghiu
Nov 26 '18 at 2:36
How much space is there for the
ol? With the second li moving 110 pixels away it's possible that it's out of view, maybe not visible at all depending on the context.– Quinn Mortimer
Nov 26 '18 at 2:37
How much space is there for the
ol? With the second li moving 110 pixels away it's possible that it's out of view, maybe not visible at all depending on the context.– Quinn Mortimer
Nov 26 '18 at 2:37
@AndreiGheorghiu if you're going to roll back to the incorrect HTML then atleast put it into the snippet.
– dwjohnston
Nov 26 '18 at 2:41
@AndreiGheorghiu if you're going to roll back to the incorrect HTML then atleast put it into the snippet.
– dwjohnston
Nov 26 '18 at 2:41
|
show 1 more comment
1 Answer
1
active
oldest
votes
The problem you have is that ID selectors that start with a numeral aren't valid css selectors. I changed them to letters and it works.
#a {
text-decoration: underline;
color: olivedrab;
}
#b {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#a:hover~#b {
display:block;
}<ol>
<li>
<a id="a">Text</a>
<a id="b">Text</a>
</li>
<li>Text</li>
</ol>Technically, the IDs are valid HTML IDs, but not valid CSS selectors.
See this answer for more details:
https://stackoverflow.com/a/31773673/1068446
Alternatively - you can escape the digits in your CSS:
#31 {
text-decoration: underline;
color: olivedrab;
}
#32 {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#31:hover~#32 {
display:block;
}<ol>
<li>
<a id="1">Text</a>
<a id="2">Text</a>
</li>
<li>Text</li>
</ol>Explanation of the 3 It escapes the following string to the unicode value - in this case the digits start with 0030.
Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example.
– Andrei Gheorghiu
Nov 26 '18 at 2:43
Here's the example.
– Andrei Gheorghiu
Nov 26 '18 at 2:49
I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, theids can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote.
– Andrei Gheorghiu
Nov 26 '18 at 3:54
1
@AndreiGheorghiu have updated that now.
– dwjohnston
Nov 26 '18 at 4:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473979%2foverflow-that-only-shows-up-when-hovering-inside-a-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem you have is that ID selectors that start with a numeral aren't valid css selectors. I changed them to letters and it works.
#a {
text-decoration: underline;
color: olivedrab;
}
#b {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#a:hover~#b {
display:block;
}<ol>
<li>
<a id="a">Text</a>
<a id="b">Text</a>
</li>
<li>Text</li>
</ol>Technically, the IDs are valid HTML IDs, but not valid CSS selectors.
See this answer for more details:
https://stackoverflow.com/a/31773673/1068446
Alternatively - you can escape the digits in your CSS:
#31 {
text-decoration: underline;
color: olivedrab;
}
#32 {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#31:hover~#32 {
display:block;
}<ol>
<li>
<a id="1">Text</a>
<a id="2">Text</a>
</li>
<li>Text</li>
</ol>Explanation of the 3 It escapes the following string to the unicode value - in this case the digits start with 0030.
Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example.
– Andrei Gheorghiu
Nov 26 '18 at 2:43
Here's the example.
– Andrei Gheorghiu
Nov 26 '18 at 2:49
I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, theids can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote.
– Andrei Gheorghiu
Nov 26 '18 at 3:54
1
@AndreiGheorghiu have updated that now.
– dwjohnston
Nov 26 '18 at 4:05
add a comment |
The problem you have is that ID selectors that start with a numeral aren't valid css selectors. I changed them to letters and it works.
#a {
text-decoration: underline;
color: olivedrab;
}
#b {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#a:hover~#b {
display:block;
}<ol>
<li>
<a id="a">Text</a>
<a id="b">Text</a>
</li>
<li>Text</li>
</ol>Technically, the IDs are valid HTML IDs, but not valid CSS selectors.
See this answer for more details:
https://stackoverflow.com/a/31773673/1068446
Alternatively - you can escape the digits in your CSS:
#31 {
text-decoration: underline;
color: olivedrab;
}
#32 {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#31:hover~#32 {
display:block;
}<ol>
<li>
<a id="1">Text</a>
<a id="2">Text</a>
</li>
<li>Text</li>
</ol>Explanation of the 3 It escapes the following string to the unicode value - in this case the digits start with 0030.
Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example.
– Andrei Gheorghiu
Nov 26 '18 at 2:43
Here's the example.
– Andrei Gheorghiu
Nov 26 '18 at 2:49
I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, theids can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote.
– Andrei Gheorghiu
Nov 26 '18 at 3:54
1
@AndreiGheorghiu have updated that now.
– dwjohnston
Nov 26 '18 at 4:05
add a comment |
The problem you have is that ID selectors that start with a numeral aren't valid css selectors. I changed them to letters and it works.
#a {
text-decoration: underline;
color: olivedrab;
}
#b {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#a:hover~#b {
display:block;
}<ol>
<li>
<a id="a">Text</a>
<a id="b">Text</a>
</li>
<li>Text</li>
</ol>Technically, the IDs are valid HTML IDs, but not valid CSS selectors.
See this answer for more details:
https://stackoverflow.com/a/31773673/1068446
Alternatively - you can escape the digits in your CSS:
#31 {
text-decoration: underline;
color: olivedrab;
}
#32 {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#31:hover~#32 {
display:block;
}<ol>
<li>
<a id="1">Text</a>
<a id="2">Text</a>
</li>
<li>Text</li>
</ol>Explanation of the 3 It escapes the following string to the unicode value - in this case the digits start with 0030.
The problem you have is that ID selectors that start with a numeral aren't valid css selectors. I changed them to letters and it works.
#a {
text-decoration: underline;
color: olivedrab;
}
#b {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#a:hover~#b {
display:block;
}<ol>
<li>
<a id="a">Text</a>
<a id="b">Text</a>
</li>
<li>Text</li>
</ol>Technically, the IDs are valid HTML IDs, but not valid CSS selectors.
See this answer for more details:
https://stackoverflow.com/a/31773673/1068446
Alternatively - you can escape the digits in your CSS:
#31 {
text-decoration: underline;
color: olivedrab;
}
#32 {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#31:hover~#32 {
display:block;
}<ol>
<li>
<a id="1">Text</a>
<a id="2">Text</a>
</li>
<li>Text</li>
</ol>Explanation of the 3 It escapes the following string to the unicode value - in this case the digits start with 0030.
#a {
text-decoration: underline;
color: olivedrab;
}
#b {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#a:hover~#b {
display:block;
}<ol>
<li>
<a id="a">Text</a>
<a id="b">Text</a>
</li>
<li>Text</li>
</ol>#a {
text-decoration: underline;
color: olivedrab;
}
#b {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#a:hover~#b {
display:block;
}<ol>
<li>
<a id="a">Text</a>
<a id="b">Text</a>
</li>
<li>Text</li>
</ol>#31 {
text-decoration: underline;
color: olivedrab;
}
#32 {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#31:hover~#32 {
display:block;
}<ol>
<li>
<a id="1">Text</a>
<a id="2">Text</a>
</li>
<li>Text</li>
</ol>#31 {
text-decoration: underline;
color: olivedrab;
}
#32 {
display: none;
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
#31:hover~#32 {
display:block;
}<ol>
<li>
<a id="1">Text</a>
<a id="2">Text</a>
</li>
<li>Text</li>
</ol>edited Nov 26 '18 at 4:04
answered Nov 26 '18 at 2:38
dwjohnstondwjohnston
2,852114891
2,852114891
Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example.
– Andrei Gheorghiu
Nov 26 '18 at 2:43
Here's the example.
– Andrei Gheorghiu
Nov 26 '18 at 2:49
I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, theids can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote.
– Andrei Gheorghiu
Nov 26 '18 at 3:54
1
@AndreiGheorghiu have updated that now.
– dwjohnston
Nov 26 '18 at 4:05
add a comment |
Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example.
– Andrei Gheorghiu
Nov 26 '18 at 2:43
Here's the example.
– Andrei Gheorghiu
Nov 26 '18 at 2:49
I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, theids can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote.
– Andrei Gheorghiu
Nov 26 '18 at 3:54
1
@AndreiGheorghiu have updated that now.
– dwjohnston
Nov 26 '18 at 4:05
Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example.
– Andrei Gheorghiu
Nov 26 '18 at 2:43
Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example.
– Andrei Gheorghiu
Nov 26 '18 at 2:43
Here's the example.
– Andrei Gheorghiu
Nov 26 '18 at 2:49
Here's the example.
– Andrei Gheorghiu
Nov 26 '18 at 2:49
I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, the
ids can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote.– Andrei Gheorghiu
Nov 26 '18 at 3:54
I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, the
ids can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote.– Andrei Gheorghiu
Nov 26 '18 at 3:54
1
1
@AndreiGheorghiu have updated that now.
– dwjohnston
Nov 26 '18 at 4:05
@AndreiGheorghiu have updated that now.
– dwjohnston
Nov 26 '18 at 4:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473979%2foverflow-that-only-shows-up-when-hovering-inside-a-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Should those
</div>be</a>instead? That looks like it could cause unpredictable behavior.– Aaron Klein
Nov 26 '18 at 2:30
Your code wasn't syntactically correct and I've corrected it - I also put it into an embed that run directly in the post.
– dwjohnston
Nov 26 '18 at 2:32
1
@dwjohnston, you should refrain from fixing code in questions, especially if the errors you fix are part of the problem. You basically provide the answer inside the question which doesn't help anyone. Most times it doesn't help OP and it certainly doesn't help future users with a similar problem. Providing the answer and explaining the principle is a lot better than modifying the question which will likely be reverted because you modified its meaning.
– Andrei Gheorghiu
Nov 26 '18 at 2:36
How much space is there for the
ol? With the second li moving 110 pixels away it's possible that it's out of view, maybe not visible at all depending on the context.– Quinn Mortimer
Nov 26 '18 at 2:37
@AndreiGheorghiu if you're going to roll back to the incorrect HTML then atleast put it into the snippet.
– dwjohnston
Nov 26 '18 at 2:41