div#languages { z-index: 6; font-family:Arial, sans-serif; font-size:10px; color:#FFFFFF; float:right; width: 220px; text-align: right; display:inline; /*background-image: url(../accessories/images/menu_bg.png);*/ padding-right: 20px; } .menu {width:700px; height:28px; position:relative; z-index:5; font-family:arial, sans-serif; background-image:url(images/menu_bg.png); padding-left: 26px; float:left;} /* hack to correct IE5.5 faulty box model */ * html .menu {width:736px;} /* remove all the bullets, borders and padding from the default list styling */ .menu ul {padding:0;margin:0;list-style-type: none;font-size: 11pt;line-height: 30px;color:#FFF;} .menu ul ul {} /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li {float:left; position:relative ;color:#FFF; padding: 0px 5px 0px 5px;} /* style the links for the top level */ .menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:#fff; width:auto; padding-left:10px; line-height:30px; font-weight:bold;} /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width: auto; width: auto;} /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited {} /* style the second level hover */ .menu ul ul a.drop:hover, .menu ul ul a:hover { } .menu ul ul :hover > a.drop, .menu ul ul :hover > a { } /* style the third level background */ .menu ul ul ul li { background-image:none; } .menu ul ul ul li { background-image: none; border-bottom: 0; } /* style the third level hover */ .menu ul li ul li ul li {background-image: none; border-bottom: 0; border-top: 0; background-color: #dfe4e7; min-width: 250px; } .menu ul li ul li ul li:hover { background-color: #FFFFFF; } /* hide the sub levels and give them a position absolute so that they take up no room */ .menu ul ul {visibility:hidden;position:absolute;height:0;top:28px;left:0; min-width: 150px;} /* another hack for IE5.5 */ * html .menu ul ul {top:30px;top:30px;} /* position the third level flyout menu */ .menu ul ul ul { left:157px; top: -2px; border-top: 2px solid #003; opacity: 0.85; font-weight: 900; } /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left {left:-137px;} /* style the table so that it takes no ppart in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited {color:#000; line-height:1em; margin: 5px 5px 5px 5px;} /* yet another hack for IE5.5 */ * html .menu ul ul a, * html .menu ul ul a:visited {width:138px;width:116px;} /* style the top level hover */ .menu a:hover, .menu ul a:hover{text-decoration:underline;} .menu :hover > a, .menu ul :hover > a {text-decoration:underline;} /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ visibility:visible;} .menu ul li ul li { min-width: 150px; float: left; border-top: 1px solid #969696; /* #002953; */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMjYlIiBzdG9wLWNvbG9yPSIjZmVmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmZTRlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-radial-gradient(center, ellipse cover, rgba(254,255,255,1) 26%, rgba(223,228,231,1) 100%), url('/images/listarrow.png') no-repeat -1px 5px; /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(26%,rgba(254,255,255,1)), color-stop(100%,rgba(223,228,231,1))), url('/images/listarrow.png') no-repeat -1px 5px; /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(254,255,255,1) 26%,rgba(223,228,231,1) 100%), url('/images/listarrow.png') no-repeat -1px 5px; /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(254,255,255,1) 26%,rgba(223,228,231,1) 100%), url('/images/listarrow.png') no-repeat -1px 5px; /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(254,255,255,1) 26%,rgba(223,228,231,1) 100%), url('/images/listarrow.png') no-repeat -1px 5px; /* IE10+ */ background: radial-gradient(center, ellipse cover, rgba(254,255,255,1) 26%,rgba(223,228,231,1) 100%), url('/images/listarrow.png') no-repeat -1px 5px; /* W3C */ background-image: url('/images/listarrow.png') no-repeat -1px 5px; /* Old browsers */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#dfe4e7',GradientType=1 ), url('/images/listarrow.png') no-repeat -1px 5px; /* IE6-8 fallback on horizontal gradient */ } .menu ul li ul li:last-child { border-bottom: 4px solid #002953; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px;border-bottom-left-radius: 5px; } .menu ul li ul li ul li:last-child { border-bottom: 0; } .menu ul li ul li:hover {/*background-color: #dfe4e7; */ background: #DFE4E7; /* Old browsers */ background-position: 2px 5px; } .menu il li ul li a:hover {background-color: none;margin-left: 10px;} .arrowplaceholder { width: 100%; height: 100%; background-image: url('/images/listarrow.png'); background-repeat: no-repeat; background-position: -2px -1px; /* Old browsers */ } /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/final_drop.html Copyright (c) 2005-2008 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. .menu {width:736px; height:28px; position:relative; z-index:5; font-family:arial, sans-serif; background-image:url(../accessories/images/menu_bg.png); padding-left: 26px; float:left;} /* hack to correct IE5.5 faulty box model * html .menu {width:736px;} /* remove all the bullets, borders and padding from the default list styling .menu ul {padding:0;margin:0;list-style-type: none;font-size: 11pt;line-height: 30px;color:#FFF;} .menu ul ul {width:115px;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon .menu li {float:left;width:115px;position:relative ;color:#FFF} /* style the links for the top level .menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:#fff; width:auto; height:28px; padding-left:10px; line-height:30px; font-weight:bold;} /* a hack so that IE5.5 faulty box model is corrected */ /* * html .menu a, * html .menu a:visited {width: auto; width: auto;} /* style the second level background .menu ul ul a.drop, .menu ul ul a.drop:visited {background-image: url(../accessories/images/menu_norm.gif);} /* style the second level hover .menu ul ul a.drop:hover, .menu ul ul a:hover {background-image: url(../accessories/images/menu_over.gif);} .menu ul ul :hover > a.drop, .menu ul ul :hover > a {background-image: url(../accessories/images/menu_over.gif);} /* style the third level background .menu ul ul ul a, .menu ul ul ul a:visited { background-image: none; background-color:#DFE4E7; white-space: nowrap; width: 300px;} /* style the third level hover .menu ul ul ul a:hover {background-image: none; background-color: #FFFFFF; white-space: nowrap; width: 300px;} /* hide the sub levels and give them a position absolute so that they take up no room .menu ul ul {visibility:hidden;position:absolute;height:0;top:28px;left:0; width:137px;} /* another hack for IE5.5 * html .menu ul ul {top:30px;top:30px;} /* position the third level flyout menu .menu ul ul ul{left:136px; top:0px; width:137px; border-top: 2px solid #000033; border-bottom: 2px solid #000033;} /* position the third level flyout menu for a left flyout .menu ul ul ul.left {left:-137px;} /* style the table so that it takes no ppart in the layout - required for IE to work .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;} /* style the second level links .menu ul ul a, .menu ul ul a:visited {background-image: url(../accessories/images/menu_norm.gif); color:#000; height:15px; line-height:1em; padding:5px 10px 0px 30px; width:96px;} /* yet another hack for IE5.5 * html .menu ul ul a, * html .menu ul ul a:visited {width:138px;width:116px;} /* style the top level hover .menu a:hover, .menu ul a:hover{text-decoration:underline;} .menu :hover > a, .menu ul :hover > a {text-decoration:underline;} /* make the second level visible when hover on first level list OR link .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible; } /* keep the third level hidden when you hover on first level list OR link .menu ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link .menu ul :hover ul :hover ul{ visibility:visible;} /*=================================================================== */