.dropdown,
.dropdown ul,
.dropdown li{
  margin  : 0;
  padding : 0;
}

.dropdown ul{
  display  : none;
  position : absolute;
  top      : 100%;
  left     : 0;
  z-index  : 1;
}

.dropdown ul ul {
  font-size  : 90%; /* not working here. works in main style sheet */
}

.dropdown ul ul li a {
  background: #E3E1E1; 
}

/* set the background colour of active items */
.dropdown li:hover > a,
.dropdown li:hover > span,
.dropdown li.dropdownOpen > a,
.dropdown li.dropdownOpen > span{
  background: #E3E1E1;
}

.dropdown ul:hover{
  background  : #E3E1E1;
}

[dir=rtl] .dropdown ul{
  left  : auto;
  right : 0;
}

.dropdown ul ul,
[dir=rtl] .dropdown ul .dropdownLeftToRight ul{
  top   : 0;
  left  : 100%;
  right : auto;
}

[dir=rtl] .dropdown ul ul,
.dropdown ul .dropdownRightToLeft ul{
  left  : auto;
  right : 100%;
}

.dropdown li{
  position        : relative;
  display         : block;
  list-style-type : none;
}

.dropdown > li{
  display : inline-block;
}

.dropdown a,
.dropdown span{
  display         : block;
  text-decoration : none;
  white-space     : pre;
  padding         : 10px 15px; 
  background      : #F3F1F1;
  color           : #333;
}

.dropdown a:hover,
.dropdown span:hover{
  background      : #E3E1E1;
}

.dropdown li:hover > ul{
  display: block;
  background: #E3E1E1;
}

.dropdownVertical{
  display : inline-block;
}

.dropdownVertical > li{
  display : block;
}

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

[dir=rtl] .dropdownVertical ul{
  left  : auto;
  right : 100%;
}

.dropdownJavaScript li:hover > ul{
  display : none;
}

.dropdownJavaScript li.dropdownOpen > ul{
  display : block;
}