Branding SP 2013 left navigation like Apple style navigation
Make sure You Enable Fly out Menus in you master page @ https://olafd.wordpress.com/2013/11/30/sharepoint-2013-fly-out-menu-in-quick-launch/
Create a separate CSS style sheet and save this whole CSS as it is .
Refer this CSS in your master page.
.ms-core-listMenu-verticalBox UL.root > LI > .menu-item{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#cacaca), to(#848484));
background:-moz-linear-gradient(top, #cacaca, #848484);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);
display:list-item;
margin:0 0 4px;
overflow:visible;
padding-top:3%;
padding-right:6%;
text-transform:uppercase;
width:84%;height:35px;
text-align:right;
color:#262626; display:inline-block; font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-decoration:none; text-shadow:0 1px #cecece;
font-size:small;
}
.ms-core-listMenu-verticalBox > ul.root > li.selected > a {
-webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1);
font-size:small;
}
.ms-core-listMenu-verticalBox > ul.root > li > a:hover {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#929292), to(#535353)); background:-moz-linear-gradient(top, #929292, #535353); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); color:#fff; text-shadow:0 -1px #414141;
font-size:small;
}
/*li.dynamic {
background-color:orange;
color:purple;
font-size:large;
border-bottom-color:#ffffff;
border-bottom-style:solid;
border-bottom-width:1px;
}
li.dynamic a:hover {
background-color:lime;
color:black;
font-size:large;
min-width:250px
}*/
li.dynamic a:hover {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#929292), to(#535353)); background:-moz-linear-gradient(top, #929292, #535353); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); color:#fff;
text-shadow:0 -1px #414141;
height:100%;
font-size:small;
}
/* li.dynamic > .menu-item{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#cacaca), to(#848484));
background:-moz-linear-gradient(top, #cacaca, #848484);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);
display:list-item;
margin:0 0 4px;
overflow:visible;
min-width:250px;min-height:30px;
text-align:center;
vertical-align:middle;
display:inline-block; font:12px "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-decoration:none;
text-shadow:0 -1px #414141;
color:#2C2C2C;
}*/
li.dynamic > .menu-item{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#cacaca), to(#848484));
background:-moz-linear-gradient(top, #cacaca, #848484);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);
display:list-item;
margin:0 0 4px;
overflow:visible;
min-width:250px;min-height:30px;
text-align:center;
padding-top:3%;
color:#262626; display:inline-block; font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-decoration:none; text-shadow:0 1px #cecece;
font-size:small;
}
