Highlighting a single item in a list menu with many items <p>I have a navigation menu and I'm trying to do two things. When I hover 1 list item I'm trying to get that single item to be highlighted, if I click on a single item, I'm trying to make a certain color or style to be applied indicating that this item is currently in focus or active. If I select another, the current item deactivates and the newly selected item becomes active.</p> <p>This is the CSS I tried but right now all items are being highlighted as soon as I hover any list item, instead of just one: </p> <pre><code>#listContainer{ margin-top:15px; } #expList ul, li { list-style: none; margin:0; padding:0; cursor: pointer; } #expList p { margin:0; display:block; } #expList p:hover { background-color:#121212; } #expList li { line-height:140%; text-indent:0px; background-position: 1px 555555px; padding-left: 20px; background-repeat: no-repeat; margin-bottom: 5px; } #expList ul{ margin-top: 5px; } #expList li:hover{ background-color: #eee; This is where the problem is } /* Collapsed state for list element */ #expList .collapsed { background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/collapsed.png'); } /* Expanded state for list element /* NOTE: This class must be located UNDER the collapsed one */ #expList .expanded { background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/expanded.png'); } </code></pre> <p>Here's a JSFiddle with most of the code <a href="http://jsfiddle.net/aHSmy/1/" rel="nofollow">http://jsfiddle.net/aHSmy/1/</a></p>