i try to create horizontal menu … here is image
now i want to remove hover color.. e.g contact and also remove underline how i do his?
.HEAD { text-decoration:none; } .HEAD li { display: inline; text-decoration:none; } . HEAD a { display: block; width: 60px; text-decoration:none; }
<div class="HEAD"> <ul class="HEAD"> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> </div>
Hi Bakhtawar,
Bakhtawar Ashiq
. HEAD a { display: block; width: 60px; text-decoration:none; }
From your code and description, if you want to remove the underline. You could use the CSS text-decoration Property. It specifies the decoration added to text, such as: underline and none. So, I suppose the issue is related to the above code. Here is an extra space. So, please modify your code as below:
.HEAD a
{
display: block;
width: 60px;
text-decoration:none;
}
For remove hover color, I suppose you are using the hover Selector as below:
a:hover { background-color: yellow; }
So, I suggest you check you code, and remove the code.
With reference to
CSS text-decoration Property and
hover Selector.
If you have any other question about my reply, please let me know freely.
Best Regards,
Dillion
Hi bakhtawar,
According to your requirements , you want to remove hover color and remove underline . I made a test on my computer , it worked fine .
If you want to remove underline , you could set the text-decoration to none .
In order to remove hover color , you could set the color is same with before , after clicking .
To achieving your goal, please try my code as below,
<style type="text/css"> .HEAD{ text-decoration:none; } .HEAD li{ display: inline; text-decoration:none; } .HEAD a{ display: block; width: 60px; text-decoration:none; } a { text-decoration:none;/*this can remove underline*/ color:#0000FF;/*choose one colour you need*/ } </style>
Best regards,
Aswecan