/* remove the list style */
.ddm {
  margin: 0;
  padding: 0;
  list-style: none;
}  

/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
.ddm li {
  float: left;
  display: block;
  /* width: 150px; */
  position: relative;
  z-index: 500;
  margin: 0 1px;
}
         
/* this is the parent menu */
.ddm li a {
  display: inline-block;
  padding: 8px 5px 0 5px;
  font-weight: bold; 
  height: 23px;
  text-decoration: none;
  text-align: left;
}

.ddm-parent {
  text-align: center; 
}
 
/* you can make a different style for default selected value */
.ddm li:hover > a {
  color: hotpink!important;
}
 
/* submenu, it's hidden by default */
.ddm ul {
  position: absolute;
  left: 0;
  display: none;
  margin: 0 0 0 -1px;
  padding: 5px 0 0 0;
  list-style: none;
  opacity: 0.85;
  font-size: 90%;
  background: #000;
}

.ddm hr {
  display: none;
  margin: 2px;
  color: #222;
}
 
.ddm ul li {
  width: 150px;
  float: left;
}
 
/* display block will make the link fill the whole area of LI */
.ddm ul a {
  display: block; 
  height: 25px;
  padding: 8px 5px;
  color: #666;
}

.ddm ul { 
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;  
}
 
/* fuck ie6 */
*html .ddm ul {
  margin:0 0 0 -2px;
}