/*
http://www.blokeish.com/2011/03/horizontal-multilevel-menu-with-css-without-javascript/
*/
html, body, div, span, ol, ul, li{
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
background:url(http://www.ghosttownaz.info/assets/images/wood.jpg);
background-repeat:repeat;
}
.clear{
clear:both;
}
#navWrapper {
position:absolute;
top:176px;
}
.navarrow {
float:right;
width:9px;
height:10px;
border:none;
}
#menu { /* the menu container */
position:absolute;
top:10px;
left:20px;
background: #633400;
width: 1060px;
/*font-size: 12px;*/
font-size: 11px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background:url(http://www.ghosttownaz.info/assets/images/navBackgroundHome.png);
background-repeat:no-repeat;
height:64px;
}
#menu ul { /* menu ul style */
list-style: none;
margin: 0;
position: relative;
left:20px;
top:15px;
}
#menu li { /* horizontal menu */
float: left;
position: relative;
}
#menu a { /* the link style of menu */
color: #fff;
font-weight:bold;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
border-right:1px solid #c18441;
}
/* The sub menu is hidden by default and its position is places right under the parent menu*/
#menu ul ul {
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

/* The sub menu list element is given a minimum width */
#menu ul ul li {
min-width: 180px;
border-bottom:#804a0c 1px solid;
}

/* the third level menu (sub sub menu) is placed to the left side of its parent*/
#menu ul ul ul {
left: 100%;
top: 0;
}
#menu ul ul a {
text-align:left;
background: #6d3d08;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
text-transform:capitalize;
}
#menu li:hover > a,
#menu ul ul :hover > a {
background: #442503;
color: #fff;
}
#menu ul li:hover > ul {
display: block;
}
/* When the mouse is over a list (li) element with unordered-list (ul) element inside then show it. The position when its shown is defined in the previous block of CSS*/
#menu ul li:hover > ul {
display: block;
}

/* Styles the anchor (a) tag when mouse over */
#menu li:hover > a,
#menu ul ul :hover > a {
background: #442503;
color: #fff;
}