Tuesday, 17 September 2013

CSS dropdown menu: What is the fastest selector?

CSS dropdown menu: What is the fastest selector?

I have a multi level navigation menu on my page consisting of an unordered
list. That list has the class menu, like so:
<ul class="menu">
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a>
<ul>
<li><a href="#">Subcategory 1</a></li>
<li><a href="#">Subcategory 2</a></li>
</ul>
</li>
</ul>
The href attributes are set to # for illustration purposes.
My question is: What is the best Selector to use for that kind of menu
regarding speed?
At the moment I am using something along these lines (again, just for
illustration, there are rules missing):
.menu {
background-color: #CCC;
}
.menu li {
background-color: #FFF;
}
.menu li > ul li ul {
background-color: #333;
}
Is a class the fastest selector in that case? Or should I use something
like .navigation-container ul? Do you have any recommendations?

No comments:

Post a Comment