/* div */
.div { position: relative; margin: 20px 0; }
.div ul { margin: 0; padding: 0; }
.div li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; }
.div a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; }
.div a:hover { color: #000; }
.div .current a { background: #999; color: #fff; border-radius: 5px; }

@media screen and (max-width: 600px)
{ .div { position: relative; min-height: 40px; }
.div ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.div li { display: none; /* hide all <li> items */ margin: 0; }
.div .current { display: block;
/* show only current <li> item */
}
.div a { display: block; padding: 5px 5px 5px 32px; text-align: left; }
.div .current a { background: none; color: #666; }
/* on div hover */
.div ul:hover { background-image: none; }
.div ul:hover li { display: block; margin: 0 0 5px; }
.div ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; }
/* right div */
.div.right ul { left: auto; right: 0; }
/* center div */
.div.center ul { left: 50%; margin-left: -90px; } }