Help With HTML CODE!

[traq]

can you also explain what "doesn't work" ?

for example, if I add a :hover rule to your menu, it works fine. Are you seeing something different? Please be as detailed as possible with your explanations.

[bbilal]

It did works fine to me as well now. Your no repeat top right attribute did not worked with the background image code. I removed no repeat top right and it worked fine. Still couple of questions how can I make background image active on selected category? Let's say someone clicked on category Apple so the bg image should have to be active on Apple and hoovering on other. Similarly if someone clicked on Social media so the bg image should have to be active on Social media and hoovering on others. How do I do that please? You can check the live bg image on http://t-clicks.com/blog

Thanks.

[traq]

for example:

<ul id="cat-nav" class="nav"> 
					<li class="cat-item cat-item-1"><a href="http://t-clicks.com/blog/?category_name=uncategorized" title="View all posts filed under Apple">Apple</a> 
</li> 
	<li class="cat-item cat-item-3"><a href="http://t-clicks.com/blog/?category_name=helo" title="sdad">Featured</a> 
</li> 
	<li class="cat-item cat-item-4"><a href="http://t-clicks.com/blog/?category_name=business" title="View all posts filed under Buisness &amp; Marketing">Buisness &amp; Marketing</a> 
</li> 
	<li class="cat-item cat-item-5"><a href="http://t-clicks.com/blog/?category_name=gaming" title="View all posts filed under Gaming">Gaming</a> 
</li> 
	<li class="cat-item cat-item-6"><a href="http://t-clicks.com/blog/?category_name=mobile" title="View all posts filed under Mobile">Mobile</a> 
</li> 
	<li class="cat-item cat-item-7"><a href="http://t-clicks.com/blog/?category_name=social-media" title="View all posts filed under Social Media">Social Media</a> 
</li> 
	<li class="cat-item cat-item-8"><a href="http://t-clicks.com/blog/?category_name=startups" title="View all posts filed under Startups">Startups</a> 
</li> 
	<li class="cat-item cat-item-9"><a href="http://t-clicks.com/blog/?category_name=tech-gadgets" title="View all posts filed under Tech &amp; Gadgets">Tech &amp; Gadgets</a> 
</li> 
	<li class="cat-item cat-item-10"><a href="http://t-clicks.com/blog/?category_name=video" title="View all posts filed under Video">Video</a> 
li> 
	<li class="cat-item cat-item-11"><a href="http://t-clicks.com/blog/?category_name=tutorials" title="View all posts filed under Tutorials">Tutorials</a> 
</li> 
			</ul>

#cat-nav li{ background: red; } 
/* normally, each <li> will have a red background. */
#cat-nav:hover li{ background: blue; } 
/* when you mouse over the menu, they will have blue backgrounds */
#cat-nav li:hover{ background: green; } 
/* and the specific link you hover over will have a green background. */
/* this won't work "as is" in all browsers (e.g., IE), but it helps explain the concept. */

also:

"active" only applies during the click. after the mouse button goes up, the item is no longer active. if you want the new background to remain after the click, you'd need to use a different solution (likely involving javascript).

[bbilal]

Yes, Everything works like you said! But the last thing you did not mention how to do it! Like if I want it to be active even after the mouse goes up! Do you have any code for that please? Sorry for bothering again and again!

[traq]

you'll likely need to use javascript. There are many approaches, usually involving adding a special class name to the item you want changed. If you use jQuery, for example, you could use the addClass() function when the link is clicked on.

look into it, give it a try, and let us know how it goes.

[DuncanCox]

What kind of Box you are taking about.

[traq]

What kind of Box you are taking about.

Please read through the thread before posting. We're talking about the <li>'s in his site menu.