Muiter Posted October 15, 2011 Share Posted October 15, 2011 I have this CSS (part of): #topnav ul{margin-left: 140px;padding:0 5px;font-size:15px;color:#3366cc;overflow:hidden;list-style-type: none;}#topnav ul li a{float:left;padding:8px;text-align: left;font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 15px;text-decoration: none;color: #999;}#topnav ul li a:hover{color: black;cursor:pointer;}#topnav ul .current{font-weight:bold;color: black;} It all works exept one: #topnav ul .current won't show as black. Any ideas? Link to comment Share on other sites More sharing options...
eTianbun Posted October 15, 2011 Share Posted October 15, 2011 Why? Can you post the HTML? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2011 Share Posted October 15, 2011 if the text is within a anchor it will follow this rule #topnav ul li a{float:left;padding:8px;text-align: left;font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 15px;text-decoration: none;color: #999;} the #topnav ul .current{font-weight:bold;color: black;} will only take effect if the anchor is the element with class current, and is below the previous ruling Link to comment Share on other sites More sharing options...
Muiter Posted October 16, 2011 Author Share Posted October 16, 2011 This is the menu: <div id="topnav"> <ul> <li <?php if($current == 'index') { echo 'class="current"'; } ?>><a href="index.php">Introductie</a></li> <li <?php if($current == 'constructie') { echo 'class="current"'; } ?>><a href="constructie.php">Constructiewerk</a></li> <li <?php if($current == 'snijtechniek') { echo 'class="current"'; } ?>><a href="snijtechniek.php">Snijtechniek</a></li> <li <?php if($current == 'laadenlossystemen') { echo 'class="current"'; } ?>><a href="laadenlossystemen.php">Laad- en lossystemen</a></li> <li <?php if($current == 'projecten') { echo 'class="current"'; } ?>><a href="projecten.php">Projecten</a></li> <li <?php if($current == 'certificering') { echo 'class="current"'; } ?>><a href="certificering.php">Certificering</a></li> <li <?php if($current == 'contact') { echo 'class="current"'; } ?>><a href="contact.php">Contact</a></li> </ul></div> When an menu item is selected the item does show up as bold. For some reason the color is not changed. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 16, 2011 Share Posted October 16, 2011 because #topnav ul .current{font-weight:bold;color: black;} will change all text in li with class 'current' to bold and and color black, but #topnav ul li a{ float:left;padding:8px;text-align: left;font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 15px;text-decoration: none;color: #999;} change the text color to #999 as it will overide the color set for li it should be #topnav ul .current a{font-weight:bold;color: black;} Link to comment Share on other sites More sharing options...
Muiter Posted October 19, 2011 Author Share Posted October 19, 2011 dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.