This is a piece of code I took for the main navigation that have the reference to the second block of code below. I don't understand the css for class as show below. For example class level-1 and leve-2 is define but what relevant does a space current or link and for level-2 dropdown-item define? I can take out the dropdown-item and it still works fine. But link and current I need to define to make the main heading (home) is selected.Here you see that only current is define so that it can highlight or select the main item. What about link? How does css know that it's not link but a "current".Code:<ul id="nav-main"> <li class="level-1 current"> <a href="../index.html" class="level-1 home">Home</a> </li> <li class="level-1 link"> <a href="../aboutus.html" class="level-1 aboutus">About Us</a> <ul class="dropdown" style="display: none;"> <li class="level-2 dropdown-item"><a href="#"><span>»</span> Mission / Core Values</a></li> <li class="level-2 dropdown-item"><a href="#"><span>»</span> History</a></li> <li class="level-2 dropdown-item"><a href="#"><span>»</span> National Board of Trustees</a></li> <li class="level-2 dropdown-item"><a href="#"><span>»</span> National Staff</a></li> <li class="level-2 dropdown-item"><a href="#"><span>»</span> FAQ's</a></li> <li class="level-2 dropdown-item"><a href="#"><span>»</span> Partners</a></li> <li class="level-2 dropdown-item"><a href="#"><span>»</span> Contact Us</a></li> </ul> </li> </ul>
If you would like to see the work in progress check out this test site at http://www.campfireusasite.orgCode:#nav-main li a.home { width: 108px; } #nav-main li a.home:hover { background-position: left -30px; } #nav-main li.section a.home, #nav-main li.current a.home { background-position: left -60px; } #nav-main li a.aboutus { width: 147px; background-position: -108px 0px; } #nav-main li a.aboutus:hover { background-position: -108px -30px; } #nav-main li.section a.aboutus, #nav-main li.current a.aboutus { background-position: -108px -60px; }
Thanks.



Reply With Quote

Bookmarks