/* Nested Side Bar Menu
Project URL: http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
*/
/* メニュー全体 */
.nestedsidemenu {
font: bold 16px 'Bitter', sans-serif;
position: relative;
width: 180px;
background: #8eeffc;
border-radius: 10px;
box-shadow: 3px 3px 3px #888;
}
.nestedsidemenu a {
	display: block;
color: black;
}

/* 親メニュー位置決め */
.nestedsidemenu ul {
z-index: 50;
margin: 0;
padding: 0;
position: relative;
list-style: none;
border:1px solid black;
border-radius: 10px;
}
/* 親メニューリスト項目の位置きめ */
.nestedsidemenu ul li {
position: relative;
}
 
/* 親メニューリスト項目 */
.nestedsidemenu ul li {
display: block;
position: relative;
/* background of menu items (default state) */
margin:0;
padding:10px;
text-decoration: none;
}
 
/* 親メニューホーバー時 */
.nestedsidemenu > ul > li:hover {
border-radius: 10px;
background: #29905e;
}

/* Sub ULs style */
.nestedsidemenu ul li ul {
position: absolute;
left: -5000px;
top: 0;
opacity: 0;
width: 200px;
visibility: hidden;
box-shadow: 2px 2px 5px gray;
}
 
/* First Sub Levels UL style on hover */
.nestedsidemenu ul li:hover > ul {
visibility: visible;
left: 100%;
opacity: 1;
}
 
/* Sub level Menu list items (alters style from Top level List Items) */
.nestedsidemenu ul li ul li {
display: list-item;
float: none;
}
 
/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
.nestedsidemenu ul li ul li ul {
top: 0;
left: 100%;
}
 
 
/* Sub Levels UL style on hover */
.nestedsidemenu ul ul li:hover > ul {
left: 100%;
}
 
/* 子メニューリンクスタイル */
.nestedsidemenu ul > li > ul > li {
font: bold 14px 'Bitter', sans-serif;
margin: 0;
background: #f0eea6;
border-radius: 10px;
border-right: none;
border-top-width: 0;
}
/* 子メニューホーバー時 */
.nestedsidemenu ul > li > ul > li:hover  {
background: #52616a;
}


/* ひ孫メニューリンクスタイル */
.nestedsidemenu ul li ul li ul li {
font: bold 14px 'Bitter', sans-serif;
margin: 0;
background: #dfdccb;
color:white;
border-right: none;
border-top-width: 0;
}
 
/* LIs with a sub UL style */
.nestedsidemenu ul li > a {
/* add padding to accomodate arrow inside LIs */
padding-right: 25px;
}
 
/* LIs with NO sub UL style */
.nestedsidemenu ul li > a:only-child {
/* undo padding for non submenu LIs */
padding-right: 10px;
}
 
/* 階層になっているときの＞マーク */
.nestedsidemenu ul li > a:after {
/* add arrow inside LIs */
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
border-left-color: black;
top: 40%;
right: 8px;
}
 
/* LIs with NO sub UL pseudo class */
.nestedsidemenu ul li > a:only-child:after {
/* undo arrow for non submenu LIs */
display: none;
}
 
 
/* ####### responsive layout CSS ####### */
 
@media (max-width: 923px) {
/* FIRST breaking point
Last top menu items' sub ULs should drop to the left (instead of right)
Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting
above
*/
 
.nestedsidemenu ul li:nth-last-of-type(-n+1) ul li:hover > ul {
left: -100%;
}
}
 
@media (max-width: 500px) {
/* SECOND breaking point
For mobile and screen browser windows
Get Sub ULs to expand entire width of document and drop down
Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
*/
.nestedsidemenu{
width: 100%;
}
 
.nestedsidemenu ul li > a:after {
/* add arrow inside LIs */
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
border-left-color: transparent;
border-top-color: #fff;
top: 40%;
right: 8px;
}
 
.nestedsidemenu ul li {
position: static;
}
 
.nestedsidemenu ul li ul {
width: 100%;
border-top: 2px solid rgba(0,0,0,.6);
/* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of
page
sometimes when menu header is tapped on */
display: none;
}
 
.nestedsidemenu ul li:hover > ul {
display: block;
left: 0 !important;
top: auto;
box-shadow: 0 0 12px gray;
}
}