.memu {
list-style: none outside none;
margin: 0;
padding: 0;
}
.memu ul {
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
left: -9999px;
margin-left: 20px;
width: 150px;
-moz-box-shadow: 3px 2px 3px #333;
-webkit-box-shadow: 3px 2px 3px #333;
box-shadow: 3px 2px 3px #333;
}
.memu ul ul {
margin-left: 0px;
margin-top: 0px;
}
.memu a {
background: #fff;
background-color: rgba(255, 255, 255, 0.98);
border: 1px solid #f7f7f7;
color: #333;
display: block;
font: bold 12px/25px segoe ui,verdana,sans-serif;
margin: 0 -1px -1px 0;
padding-left: 10px;
text-decoration: none;
width: 139px;
text-overflow: ellipsis;
}
.memu .memu-icon {
position: relative;
width: 16px;
height: 16px;
margin: 4px 10px 0px 0px;
float: left;
}
.memu li.memu-root > a {
border-left: 0 !important;
border-right: 0 !important;
border-top: 1px solid transparent !important;
border-bottom: 1px solid transparent !important;
background: transparent !important;
}
.memu li {
float: left;
}
.memu li.has-children > a {
background: url("arrow.png") no-repeat scroll #fff;
background-position: 130px center;
background-color: rgba(255, 255, 255, 0.98);
}
.memu li:hover {
position: relative;
z-index: 100;
}
.memu li:hover > a {
background-color: #fff;
border-color: #fafafa;
color: #56789A;
}
.memu li:hover > ul {
left: -20px;
opacity: 1;
top: 26px;
z-index: -1;
}
.memu li:hover li:hover > ul {
left: 150px;
opacity: 1;
top: 0px;
z-index: 100;
}
.memu-current {
background-color: #abcdef !important;
background-color: rgba(235, 245, 255, 0.98 !important);
}
Thanks to
cssplay.co.uk
$('.js-enabled').memu({
icon: {
inset: true, // create an inset where there is no icon
margin: { // specify the margins of the icon (put them how it's right for you
top: 4,
right: 10
}
},
width: 150, // the width of the (drop down) items
rootWidth: 75, // the width of the (root) items
height: 25 // the height of the items
});
Thanks to
jstorage.info