Manipulation of single <li> items in a <nav><ul></ul></nav> - html

Question

I am creating a custom side navigation for one of my home projects and I recently was informed that instead of using several <nav> tags and placing them manually I should use a single <nav> and then a list on the inside. This however, has caused issues the replication of the way the side nav I had set up works
The following .css is the code which produces the format of the side navigation
nav {
display: block;
color: black;
padding: 10px;
text-transform: uppercase;
right: 0px;
position: fixed;
z-index: 3000;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
-webkit-transition: all 250ms ease-out !important;
-moz-transition: all 250ms ease-out !important;
transition: all 250ms ease-out !important;
border: 1mm;
border-color: #CCCCFF;
border-left-style: solid;
}
#topnav:hover,
#nav2:hover,
#nav3:hover,
#nav4:hover,
#nav5:hover,
#nav6:hover,
#botnav:hover {
z-index: 5000;
width: 3cm;
background-color: black;
border-style: solid;
border-right-style: none;
color: white;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
}
nav:hover span {
display: none;
}
#topnav {
top: 100px;
background-color: white;
border-top-style: solid;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
}
#topnav:hover:before {
content: "Top";
}
#nav2 {
top: 140px;
background-color: red;
}
#nav2:hover:before {
content: "Red";
}
#nav3 {
top: 180px;
background-color: blue;
}
#nav3:hover:before {
content: "blue";
}
#nav4 {
top: 220px;
background-color: green;
}
#nav4:hover:before {
content: "green";
}
#nav5 {
top: 260px;
background-color: purple;
}
#nav5:hover:before {
content: "purple";
}
#nav6 {
top: 300px;
background-color: orange;
}
#nav6:hover:before {
content: "orange";
}
#botnav {
top: 340px;
background-color: white;
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
}
#botnav:hover:before {
content: "200";
}
This can be seen put in place on the JSFiddle
Whilst editing my code I have had an issue when you hover over a list item. When the <li> item extends, it extends the <nav> and the <ul> as well. This is not what I intended it to do. I intended it to only extend <li> item.
.sidenav {
display: block;
color: black;
text-transform: uppercase;
right: 0px;
top: 10%;
position: fixed;
z-index: 3000;
text-align: center;
border: 1mm;
border-color: #CCCCFF;
border-style: solid;
border-right-style: none;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
}
.sidenav ul {
list-style-type: none;
}
.sidenav li {
padding: 10px;
width: 20px;
height: 20px;
line-height: 20px;
-webkit-transition: all 250ms ease-out !important;
-moz-transition: all 250ms ease-out !important;
transition: all 250ms ease-out !important;
}
.sidenav li:hover {
width: 3cm;
background-color: white;
}
This can be seen put in place in this JSFiddle.
I thought this might be able to be masked by setting the text-align: right and then change the text-align of the <li> item being hovered over, only when it was being hovered over. This works however it then meant the whole of the border moved out instead of only the border around the <li> item being hovered over and the background colours of the <li> items are also extended out instead of just the one being hovered over.
The question
Essentially my question is how do I need to edit my css so that the nav bar which is structured like
<nav>
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</nav>
behave in the same way my first structure shown in the first JSFiddle did? How can I manipulate a single <li> tag without effecting the whole <ul> or <nav>?

Answer 1

So the reason that the sidenav is expanding when the li elements do, is because there's no explicit width placed on that parent element. So it's defaulting to width: auto. Thus, when the li elements expand, so does the parent. I've got a solution working that approximates your original example.
Here is the updated fiddle.
I only made a few small updates to get it working. Here they are:
.sidenav {
width: 40px;
}
.sidenav li {
position: relative;
right: 0;
}
.sidenav li:hover {
right: 200%;
}
Note, these are styles added in addition to what was already there, nothing removed. Hopefully this at least helps you get on the right path with this new solution!