I want to show the list view headers of a SharePoint-List (these grey things with filter-dropdown, standard-view, standard masterpage) always, not just on hover. I tried to locate the correct css class via firebug (and googled for this question) but haven't found something yet, so I thought i'll ask here :)

Could anyone tell me which css I have to change to always show the Column Heades and the filter menu arrow, not just on hover?

1 Answer 1


I'd recommend using Chrome to try and find this kind of thing; it generally does the best job of handling 'hover' states.

So it turns out there's a couple things that happen when you mouse over a column header:

  1. ':hover' CSS styles are applied to the TH (usually .ms-vh2) that houses the column header:
tr.ms-viewheadertr > th.ms-vh:hover, tr.ms-viewheadertr > th.ms-vh2:hover 
border-color: #e2e2e2;
background-color: #f6f6f6;
  1. The DIV.s4-ctx within this TH has the class 's4-ctx-show' added to it. It looks like JavaScript normally removes this class afterwards.
tr.ms-viewheadertr > th:hover .s4-ctx-show {
background-color: #efefef;
background-image: none;
border: 1px solid #e0e0e0;
border-width: 0px 1px;
  1. The IMG within that div has an inline 'visibility' attribute set to 'visible'.

So, my recommended approach would be to move those two style definitions above into the non-hover definitions ( so for the .s4-ctx-show, just put it under .s4-ctx ) and then use JQuery to force the IMG to be visible - or, just set the background image on the div to your own arrow via CSS.

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.