Tidying up css code

Question

I have a .css file for my website which does all the formatting for the side navigation bar. The only problem is that it looks messy and it seems to be inefficient as I kept on having to copy the same code again and again only to change one or two value per slide pop out. I am wanting to know how I could make it neater and more efficient.

This is what the relevant css code looks like

nav {
    display: block;
    color:white;
    border:2px;
    border-color:aqua;
    border-style:solid;
    border-right-style:none;
    padding:10px;
    text-transform: uppercase;
}

/*First nav box*/

#topnav {
    top: 100px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:white;
    border-bottom-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#topnav:hover span {display:none}

#topnav:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    color:white;
}

#topnav:hover:before {
    content:"Top";
}

/*Second nav box*/

#nav2 {
    top: 140px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:red;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav2:hover span {display:none}

#nav2:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav2:hover:before {
    content:"Red";
}


/*Third nav box*/

#nav3 {
    top: 180px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:blue;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav3:hover span {display:none}

#nav3:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav3:hover:before {
    content:"blue";
}

/*Fourth nav box*/

#nav4 {
    top: 220px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:green;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav4:hover span {display:none}

#nav4:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav4:hover:before {
    content:"green";
}

/*Fifth nav box*/

#nav5 {
    top: 260px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:purple;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav5:hover span {display:none}

#nav5:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav5:hover:before {
    content:"purple";
}

/*Sixth nav box*/

#nav6 {
    top: 300px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:orange;
    border-bottom-style:none;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#nav6:hover span {display:none}

#nav6:hover {
    width:3cm;
    background-color:black;
    border-bottom-style:solid;
    border-top-style:solid;
    color:white;
}

#nav6:hover:before {
    content:"orange";
}

/*Bot nav box*/

#botnav {
    top: 340px;
    right: 0px;
    position: fixed;
    z-index: 3000;
    background-color:white;
    border-top-style:none;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    vertical-align:
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#botnav:hover span {display:none}

#botnav:hover {
    width:3cm;
    background-color:black;
    border-top-style:solid;
    color:white;
}

#botnav:hover:before {
    content:"200";
}

Also here is a JSFiddle with the code in practice to show you what it looks like. Also if I need to change the HTML to make the css more efficient let me know.

Thanks for any help

Edit

So based off Darren's answer and Stafox's answer, I have condensed the code to this.

nav {
    display: block;
    color:white;
    border:2px;
    border-color:aqua;
    border-left-style:solid;
    padding:10px;
    text-transform: uppercase;
    right: 0px;
    position: fixed;
    z-index: 3000;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    -webkit-transition: 250ms all ease-out;
    transition: 250ms all ease-out;
    color:black;
}

#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;
}

nav:hover span
{
    display:none
}

/*First nav box*/
#topnav {
    top: 100px;
    background-color:white;
    border-top-style:solid;
}

#topnav:hover:before {
    content:"Top";
}

/*Second nav box*/

#nav2 {
    top: 140px;
    background-color:red;
}

#nav2:hover:before {
    content:"Red";
}


/*Third nav box*/

#nav3 {
    top: 180px;
    background-color:blue;
}

#nav3:hover:before {
    content:"blue";
}

/*Fourth nav box*/

#nav4 {
    top: 220px;
    background-color:green;
}

#nav4:hover:before {
    content:"green";
}

/*Fifth nav box*/

#nav5 {
    top: 260px;
    background-color:purple;
}

#nav5:hover:before {
    content:"purple";
}

/*Sixth nav box*/

#nav6 {
    top: 300px;
    background-color:orange;
}

#nav6:hover:before {
    content:"orange";
}

/*Bot nav box*/

#botnav {
    top: 340px;
    background-color:white;
    border-bottom-style:solid;

}

#botnav:hover:before {
    content:"200";
}

Here is a JSFiddle of it in use.

Are there any other suggestions?

Answer 1

You could group the common navigational elements within a CSS class.

For instance, your topnav, nav2, nav3, nav4 and nav5 all have the following in common:

• Colour
• Position
• Transition
• Right
• Border
• Line height

So it may make more sense to have a base element with these styles rather than repeating them.

.navigation-base {
    color: black;
    position: fixed;
    transition: 250ms all ease-out;
    right: 0px;
}

And then apply the navigation-base to all navigational elements and then add an additional class where they differ.

.navigation-unsuccessful {
   background-color: red;
}

.navigation-success {
   background-color: green;
}

<nav class="navigation-base navigation-success">
  <!-- Navigational components -->
</nav>