/** * PgwMenu - Version 2.0 * * Copyright 2014, Jonathan M. Piat * http://pgwjs.com - http://pagawa.com * * Released under the GNU GPLv3 license - http://opensource.org/licenses/gpl-3.0 */ .pgwMenu { background: #333; height: 40px; position: relative; list-style: none; } .pgwMenu ul { list-style: none; white-space: nowrap; margin: 0; padding: 0; } .pgwMenu li { float: left; } .pgwMenu li a:hover { background: #666; text-decoration: none; } .pgwMenu a { display: block; /* color: #fff; */ line-height: 40px; padding: 0 12px; text-decoration: none; } .pgwMenu a.selected { background: #777; } .pgwMenu .pm-links.mobile, .pgwMenu .pm-viewMore>ul { background: #333; box-shadow: 2px 2px 4px #777; position: absolute; left: 0; top: 100%; z-index: 1000; } .pgwMenu .pm-viewMore { display: none; position: relative; } .pgwMenu .pm-viewMore>a { display: inline-block; } .pgwMenu .pm-viewMore>ul { left: auto; right: 0; } .pgwMenu .pm-viewMore li { float: none; } .pgwMenu .pm-viewMore span.icon, .pgwMenu .pm-viewMore span.white { border-color: #fff transparent; border-style: solid; border-width: 8px 6px 0; margin-left: 3px; display: inline-block; } .pgwMenu.light .pm-viewMore span.icon, .pgwMenu .pm-viewMore span.black { border-color: #000 transparent; border-style: solid; border-width: 8px 6px 0; margin-left: 3px; display: inline-block; } .pgwMenu .pm-links.mobile li, .pgwMenu .pm-viewMore>ul>li { display: block; clear: both; width: 175px; } .pgwMenu .pm-dropDown, .pgwMenu .pm-viewMore, .pgwMenu .pm-viewMore>ul { display: none; } .pgwMenu .pm-dropDown a { display: inline-block; background: #777; } .pgwMenu .pm-dropDown a.active, .pgwMenu .pm-viewMore a.active { background: #666; } .pgwMenu .pm-dropDown span.icon, .pgwMenu .pm-dropDown span.white { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABKSURBVEhL7ZOxDQAwCMN6O4/T0tmjsxHJDB4yROJ0dz3s1BRHEi2OTREBpQFKA5QGKA3m7IP8RKeIgNIApQFKA5QGc/ZBfkJTdF0oUafLBAFNbAAAAABJRU5ErkJggg==) no-repeat; display: block; height: 22px; width: 22px; margin: 9px 5px; } .pgwMenu.light .pm-dropDown span.icon, .pgwMenu .pm-dropDown span.black { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvgAADr4B6kKxwAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABpSURBVEhL7ZPLCcAwDEM9jefI/ks1Hyj2QbiGSLcKHggl8sEktjTc/WGyZxo6YKAbrFzFoav3/hdhmsrlijBN5XJFmKZyuSJMU7lcsfV/kIN0FRJgyACGDGDIAIYMpK8CHt6iG6xZhY0JIJ+6AHGbUFsAAAAASUVORK5CYII=) no-repeat; display: block; height: 22px; width: 22px; margin: 9px 5px; } .pgwMenu.light { background: #ddd; } .pgwMenu.light .pm-viewMore>ul { background-color: #ddd; } .pgwMenu.light .pm-links.mobile { background: #ddd; } .pgwMenu.light li a:hover { background: #d0d0d0; } .pgwMenu.light a { color: #000; } .pgwMenu.light a.selected { background: #c5c5c5; } .pgwMenu.light .pm-dropDown a { background: #c5c5c5; } .pgwMenu.light .pm-dropDown a.active, .pgwMenu.light .pm-viewMore a.active { background: #d0d0d0; } .pgwMenu.light .pm-dropDown a.active { background: #bbb; } .pgwMenuCustom { background-color: #fff; } .dowebok-explain { margin-top: 20px; font-size: 14px; text-align: center; color: #f50; } .pgwMenu a { padding: 0 20px; } /* 閼奉亜鐣炬稊澶嬬壉瀵 */ .pgwMenuCustom { /*Opera 11.10+*/ height: 80px; position: relative; list-style: none; padding-right: 150px; } .pgwMenuCustom ul { list-style: none; white-space: nowrap; margin: 0; padding: 0; /* margin-right: 200px; */ } .pgwMenuCustom .pm-links.mobile, .pgwMenuCustom .pm-viewMore>ul { background-color: rgba(255, 255, 255, 0.9); box-shadow: 2px 2px 4px #777; position: absolute; left: 0; top: 100%; z-index: 1000 } .pgwMenuCustom .pm-viewMore>ul ul{ right: 100%; top: 0; } .pgwMenuCustom .pm-links.mobile li, .pgwMenuCustom .pm-viewMore>ul>li { display: block; clear: both; min-width: 100%; position: relative; } .pgwMenuCustom li { float: left; } .pgwMenuCustom a { display: block; color: #333; line-height: 78px; margin: 0 20px; font-size: 20px; border-bottom: 2px solid #0000; text-decoration: none; } .pgwMenuCustom a.selected { /* background: #e5601d */ color: #e86f2e; /* border-bottom: 2px solid #174995; */ } .pm-viewMore .pgwMenuCustom a { height: 35px; } .pgwMenuCustom .pm-dropDown, .pgwMenuCustom .pm-viewMore, .pgwMenuCustom .pm-viewMore>ul { display: none } .pgwMenuCustom .pm-dropDown a { display: inline-block; /* background: #e86f2e */ } .pgwMenuCustom .pm-dropDown a.active, .pgwMenuCustom .pm-viewMore a.active { /* background: #e5601d */ } .pgwMenuCustom .pm-dropDown span.icon, .pgwMenuCustom .pm-dropDown span.black { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvgAADr4B6kKxwAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABpSURBVEhL7ZPLCcAwDEM9jefI/ks1Hyj2QbiGSLcKHggl8sEktjTc/WGyZxo6YKAbrFzFoav3/hdhmsrlijBN5XJFmKZyuSJMU7lcsfV/kIN0FRJgyACGDGDIAIYMpK8CHt6iG6xZhY0JIJ+6AHGbUFsAAAAASUVORK5CYII=) no-repeat; display: block; height: 22px; width: 22px; margin: 9px 5px } .pgwMenuCustom .pm-dropDown span.white { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABKSURBVEhL7ZOxDQAwCMN6O4/T0tmjsxHJDB4yROJ0dz3s1BRHEi2OTREBpQFKA5QGKA3m7IP8RKeIgNIApQFKA5QGc/ZBfkJTdF0oUafLBAFNbAAAAABJRU5ErkJggg==) no-repeat; display: block; height: 22px; width: 22px; margin: 9px 5px } .pgwMenuCustom .pm-viewMore { display: none; position: relative } .pgwMenuCustom .pm-viewMore>a { display: inline-block } .pgwMenuCustom .pm-viewMore>ul { left: auto; right: 0 } .pgwMenuCustom .pm-viewMore li { float: none } .pgwMenuCustom .pm-viewMore span.icon, .pgwMenuCustom .pm-viewMore span.white { border-color: #fff transparent; border-style: solid; border-width: 8px 6px 0; margin-left: 3px; display: inline-block } .pgwMenuCustom .pm-viewMore span.black { border-color: #000 transparent; border-style: solid; border-width: 8px 6px 0; margin-left: 3px; display: inline-block } .mainlevel{ position: relative; } .mainlevel ul { display: none; position: absolute; background-color: rgb(255, 255, 255); padding: 18px 0; min-width: 100%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); } .mainlevel li { /* border-top: 1px solid #fff; */ width: 100%; float: none; /* background-color: rgba(0, 0, 0, 0.5); */ margin-bottom: 5px; } .mainlevel li a { line-height: 35px; font-size: 14px; text-align: center; margin: 0; padding: 0 5px; border-bottom: 2px solid transparent; } .mainlevel li a:hover { border-bottom: 2px solid #e86f2e; color: #e86f2e; } .pgwMenuCustom li:hover .nan_a { color: #e86f2e; font-weight: bold; }