/* ---------------------------------------------------------------- */
/* page menu style                                                  */
/* ---------------------------------------------------------------- */

/*
ul version

menu depth: 3

an example of a simple css ul navigation bar

base code thanks to:

https://htmldog.com/
*/

/*
nav structure
=============
*/

ul.page_menu_bar
{
  width: 100%;

  box-sizing: border-box;

  font-weight: bold;

  margin: 0.0em;
  border: 0.0em;
  padding: 0.0em 0.75em 0.0em 0.75em;

  list-style: none;
  float: left;

  -webkit-transition: 0.5s;
  transition: 0.5s;
}

ul.page_menu_bar li
{
  float: left;
  position: relative;

  margin: 0.0em;
  border: 0.0em;
  padding: 0.25em 0.25em 0.25em 0.25em;
}

ul.page_menu_bar li ul
{
  position: absolute;
  left: 0;
  top: 100%;
  visibility: hidden;
  opacity: 0;

  margin-left: 0.0em;
  padding-left: 0.0em;
}

ul.page_menu_bar ul ul
{
  left: 100%;
  top: 0;
}

ul.page_menu_bar li:hover > ul
{
  visibility: visible;
  opacity: 1;
}


/* coloring */

ul.page_menu_bar a:link,
ul.page_menu_bar a:visited,
ul.page_menu_bar a:hover,
ul.page_menu_bar a:active
{
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

ul.page_menu_bar
{
  background: #ff0000;
  color: #000000;
}

.page_menu_bar_bullet
{
  color: #000000;
}


/* level 1 */

ul.page_menu_bar li
{
  background: #ff0000;
  color: #00ffff;

  width: auto;
}

ul.page_menu_bar li.page_menu_bar_link_1
{
  background: #ff0000;
  color: #000000;
}

ul.page_menu_bar li.page_menu_bar_link_1:hover
{
  background: #ff0000;
  color: #ffffff;
}


/* level 2 */

ul.page_menu_bar ul li
{
  background: #ff0000;
  color: #00ffff;

  width: 6.0em;
}

ul.page_menu_bar ul li.page_menu_bar_link_2
{
  background: #ff0000;
  color: #000000;
}

ul.page_menu_bar ul li.page_menu_bar_link_2:hover
{
  background: #ff0000;
  color: #ffffff;
}


/* level 3 */

ul.page_menu_bar ul ul li
{
  background: #ff0000;
  color: #00ffff;

  width: 7.0em;
}

ul.page_menu_bar ul ul li.page_menu_bar_link_3
{
  background: #ff0000;
  color: #000000;
}

ul.page_menu_bar ul ul li.page_menu_bar_link_3:hover
{
  background: #ff0000;
  color: #ffffff;
}

/* ---- */