var body = document.getElementsByTagName('body')[0];
var bList = document.getElementsByClassName('b-list')[0];
var selection = bList.getElementsByTagName('h2')[0];
var options = bList.getElementsByTagName('li');
var paragraph = document.getElementsByTagName('p')[0];
function closeBList(e) {
var familyTree = [e.target,e.target.parentNode,e.target.parentNode.parentNode]
if (familyTree.indexOf(bList) === -1) {
bList.classList.remove('open');
}
}
function toggleBList() {
bList.classList.toggle('open');
}
function changeSelection() {
var newSelection = this.textContent;
selection.textContent = newSelection;
}
for (var i = 0; i < options.length; i++) {
var option = options[i];
option.addEventListener('click',changeSelection,false);
}
body.addEventListener('click', closeBList, true);
bList.addEventListener('click',toggleBList,false);
paragraph.addEventListener('mouseover',toggleBList,false);
.b-list {
position: relative;
margin: 0 12px;
padding: 0;
cursor: default;
}
.b-list h2,
.b-list ul {
border-radius: 2px;
}
.b-list h2, .b-list li {
font-size: 12px;
font-family: verdana, sans-serif;
}
.b-list h2 {
margin: 0;
padding: 2px 22px 1px 4px;
font-weight: normal;
border: 1px solid rgb(227,233,239);
border-top: 1px solid rgb(171,173,179);
}
.b-list h2::after {
content: '\25be';
display: block;
position: absolute;
top: 1px;
right: 1px;
height: 19px;
font-size: 19px;
line-height: 19px;
}
.b-list h2:hover {
border: 1px solid rgb(199,226,241);
border-top: 1px solid rgb(87,148,191);
}
.b-list ul {
display: none;
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid rgb(0,0,0);
border-top: 2px solid rgb(178,178,178);
border-left: 2px solid rgb(178,178,178);
}
.b-list li {
padding-left: 3px;
line-height: 18px;
}
.b-list li:hover {
color:rgb(255,255,255);
background-color:rgb(51,153,255);
}
.b-list.open ul {
display: block;
}
.b-list:hover h2::after,
.b-list.open h2::after {
top: 0px;
right: 0px;
background-color: rgba(169,219,246,0.5);
border: 1px solid rgb(60,127,177);
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
p, .b-list {
display: inline-block;
vertical-align: top;
}
p {
margin: 0 12px 0 0;
padding: 0;
font-weight: bold;
color: red;
font-family: arial, helvetica, sans-serif;
}
<h1>Spot the Imposter...</h1>
<p>Hover over me (repeatedly)</p>
<select class="a-list">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
<option>Option A4</option>
<option>Option A5</option>
<option>Option A6</option>
</select>
<div class="b-list">
<h2>Option B1</h2>
<ul>
<li>Option B1</li>
<li>Option B2</li>
<li>Option B3</li>
<li>Option B4</li>
<li>Option B5</li>
<li>Option B6</li>
</ul>
</div>
<select class="c-list">
<option>Option C1</option>
<option>Option C2</option>
<option>Option C3</option>
<option>Option C4</option>
<option>Option C5</option>
<option>Option C6</option>
</select>