drop-down-menu like used in bootstrap - css

Question

I like to know how bootstrap3 drop-down-menu system in its tutorial page works.
1. It folds all to main topic by default (you can click or scroll-up/down to expand)
2. It expands automatically when you scroll up and down or click particular menu.
3. It matches you with the topic and has some hi-light in the sub-menu
http://getbootstrap.com/css
Can this matching only complete with only css and html, or it has to deal with JavaScript also?
If it can be both way what is the suit case for it uses.

Answer 1

This is PURE CSS solution of bootstrap dropdown menu, here is working fiddle
http://jsfiddle.net/DTcHh/1837/
HTML
<nav>
<ul>
<li>
Has Dropdown
<ul>
<li>
Change password </li>
<li>
Edit personal data
</li>
</ul>
</li>
<li>
Support
</li>
<li>
Logout
</li>
</ul>
</nav>
CSS
nav > ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
color: #555;
}
nav > ul li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 10px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav > ul li:hover {
background-color: #e7e7e7;
color: #555;
}
nav > ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
min-width: 225px;
display: none;
opacity: 0;
visibility: hidden;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
font-size: 14px;
list-style: outside none none;
padding: 5px 0;
text-align: left;
z-index: 10000;
}
nav > ul li ul li {
background-color: transparent;
display: block;
color: #262626;
width:90%;
text-align:left;
padding-left:10px;
padding-right:10px;
text-transform:uppercase;
}
nav > ul li ul li:hover {
background-color: #f5f5f5;
color: #262626;
text-decoration:none;
}
nav > ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
ul li ul a li i{
padding-right:5px;
}
nav ul li ul a li{
color:grey !important;
}
nav ul li ul a{
color:grey;
font-size:12px;
}