#mainmenu_mylist, #mainmenu_mylist ul { margin: 0; padding: 0; list-style: none; } #mainmenu_mylist:before, #mainmenu_mylist:after { content: ""; display: table; } #mainmenu_mylist:after { clear: both; } #mainmenu_mylist { zoom:1; } #mainmenu_mylist li { float: left; border-right: 1px solid #fff; box-shadow: 1px 0 0 #fff; } #mainmenu_mylist a { color: #000000 !important; float: left; padding: 12px 5px; text-decoration: none; text-transform: uppercase; } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 500px) and (max-device-width : 1024px) { /* Styles */ #mainmenu_mylist a { color: #000000 !important; float: left; padding: 9px 12px !important; text-decoration: none; text-transform: uppercase; font-size:9px; } } #mainmenu_mylist li:hover > a { color: #fafafa; } *html #mainmenu_mylist li a:hover { /* IE6 only */ color: #fafafa; } #mainmenu_mylist ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; left: 0; z-index: 1; box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; transition: all .2s ease-in-out; } #mainmenu_mylist li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu_mylist ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ box-shadow: -1px 0 0 rgba(255,255,255,.3); } #mainmenu_mylist ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ box-shadow: 0 1px 0 #FFFFFF; } #mainmenu_mylist ul li:last-child { box-shadow: none; } #mainmenu_mylist ul a { padding: 10px; width: auto; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #mainmenu_mylist ul a:hover { background-color: #68B5CF; } #mainmenu_mylist ul li:first-child > a { border-radius: 3px 3px 0 0; } #mainmenu_mylist ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #mainmenu_mylist ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #mainmenu_mylist ul li:first-child a:hover:after { border-bottom-color: #428F9B; } #mainmenu_mylist ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #mainmenu_mylist ul li:last-child > a { border-radius: 0 0 3px 3px; } #mainmenu_mylist-trigger { /* Hide it initially */ display: none; } @media screen and (max-width: 600px) { #mainmenu_mylist-wrap { position: relative; } #mainmenu_mylist-wrap * { box-sizing: border-box; } #mainmenu_mylist-trigger { display: block; /* Show it now */ height: 40px; line-height: 40px; cursor: pointer; padding: 0 0 0 35px; border: 1px solid #222; color: #fafafa; font-weight: bold; background-color: #111; /* Multiple backgrounds here, the first is base64 encoded */ background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111); border-radius: 6px; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #mainmenu_mylist { margin: 0; padding: 10px; position: absolute; top: 40px; width: 100%; z-index: 1; display: none; box-shadow: none; } #mainmenu_mylist:after { content: ''; position: absolute; left: 25px; top: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #444; } #mainmenu_mylist ul { position: static; visibility: visible; opacity: 1; margin: 0; background: none; box-shadow: none; } #mainmenu_mylist ul ul { margin: 0 0 0 20px !important; box-shadow: none; } #mainmenu_mylist li { position: static; display: block; float: none; border: 0; margin: 5px; box-shadow: none; } #mainmenu_mylist ul li{ margin-left: 20px; box-shadow: none; } #mainmenu_mylist a{ display: block; float: none; padding: 0; color: #999; } #mainmenu_mylist a:hover{ color: #fafafa; } #mainmenu_mylist ul a{ padding: 0; width: auto; } #mainmenu_mylist ul a:hover{ background: none; } #mainmenu_mylist ul li:first-child a:after, #mainmenu_mylist ul ul li:first-child a:after { border: 0; } } @media screen and (min-width: 600px) { #mainmenu_mylist { display: block !important; } } /* iPad */ .no-transition { transition: none; opacity: 1; visibility: visible; display: none; } #mainmenu_mylist li:hover > .no-transition { display: block; }