Menú vertical tipo direcciones

Navegando por VidaExtra me llamo mucho uno de los menús que mostraban sus etiquetas me pareció divertido y original así que buscando entre sus códigos logre rescatar el código CSS, después de cambiar algunas palabras, modificar algunas cosas mínimas logre ejecutarloprimero les dejo el código HTML:



HTML:

<div class="menudir">
 <ul>
  <li class="et01"><a href="#">Inicio</a></li>
  <li class="et02"><a href="#">Contacto</a></li>
  <li class="et03"><a href="#">Categorías</a></li>
  <li class="et04"><a href="#">About</a></li>
 </ul>
</div>

Ahora las definiciones del CSS:
[+/-] Ver / Ocultar Codigo

.menudir {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkmcaUN7oIba3B8go8Q9Mh4ZG-xsNmgaU57J7bxpAHzUUog-p3JCtQOsHZUWTAbkCjGFSwzy4iT37I55AgM9Dpi-K7cxTFn4QJv6Vonvdo_BLREGQKpGc483N_pt0wnZPoj7EAYVV0jU/s1600/bg-related.jpg") no-repeat scroll 0 100% transparent;
    margin: 40px 0 0;
    overflow: hidden;
    padding: 0 0 100px;
    width: 300px;
}
.menudir ul {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkmcaUN7oIba3B8go8Q9Mh4ZG-xsNmgaU57J7bxpAHzUUog-p3JCtQOsHZUWTAbkCjGFSwzy4iT37I55AgM9Dpi-K7cxTFn4QJv6Vonvdo_BLREGQKpGc483N_pt0wnZPoj7EAYVV0jU/s1600/bg-related.jpg") repeat-y scroll -646px 0 transparent;
    margin: 0;
    overflow: hidden;
    padding: 10px 0 0;
    width: 100%;
}
.menudir li {
    list-style-type: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0;
    width: 146px;
}
.menudir a {
    background: none repeat scroll 0 0 #999999;
    color: #FFFFFF;
    font-size: 0.9em;
    padding: 5px 10px 4px;
    text-transform: uppercase;
}
.menudir a:hover {
    background-color: #FF6633 !important;
    color: #FFFFFF !important;
    text-decoration: none;
}
.menudir .et01, .et04 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkmcaUN7oIba3B8go8Q9Mh4ZG-xsNmgaU57J7bxpAHzUUog-p3JCtQOsHZUWTAbkCjGFSwzy4iT37I55AgM9Dpi-K7cxTFn4QJv6Vonvdo_BLREGQKpGc483N_pt0wnZPoj7EAYVV0jU/s1600/bg-related.jpg") no-repeat scroll 50% -11px transparent;
    clear: both;
    text-align: center;
    width: 200px;
}
.menudir .et01 a, .et04 a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rHF74AQx3rSmSx-lEawzsyn7ftGeQRbkbU0hCVLLG0Ee_2k7BofWyS8D6MgTHDzSL1j8j-6eTwy5BOc9T5T08G2Xu2s7V-ReoVdbYZ22WYh70__E4lNKHqMOK_5vG87fgLUw6xSVFsU/s1600/arrow-mini-right.png") no-repeat scroll 100% 50% transparent;
    padding-right: 15px;
}
.menudir .et02 {
    clear: left;
    display: inline;
    float: left;
    margin: 12px 0 0;
    text-align: right;
}
.menudir .et02 a{
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaGQy0vbQ-71m2NgB4BTqeom6rqv7_vc0plcHla1S5Bt6GBWcTwwB5YBNp54v-ChpoKIJIX7iImdHPgs_ZwgiibdNwEUnrGLegM-m0EzCB82h_FAXQBWcMVeZOAlownbOO_2fr-alwotg/s1600/arrow-mini-left.png") no-repeat scroll 0 50% transparent;
    padding-left: 15px;
}
.menudir .et03 {
    clear: right;
    display: inline;
    float: right;
    margin: 0 1px 12px 0;
    text-align: left;
}
.menudir .et03 a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rHF74AQx3rSmSx-lEawzsyn7ftGeQRbkbU0hCVLLG0Ee_2k7BofWyS8D6MgTHDzSL1j8j-6eTwy5BOc9T5T08G2Xu2s7V-ReoVdbYZ22WYh70__E4lNKHqMOK_5vG87fgLUw6xSVFsU/s1600/arrow-mini-right.png7") no-repeat scroll 100% 50% transparent;
    padding-right: 15px;
}
.menudir .et01 a {
    background-color: #6CA427;
}
.menudir .et04 a {
    background-color: #A4C739;
}
.menudir .et02 a {
    background-color: #1680C6;
}
.menudir .et03 a {
    background-color: #94C6EB;
    color: #333333;

Y Así quedaría nuestro Menú Vertical estilo Direcciones.

• Inicio
• Contacto
• Categorías
• About