Issue - Menu Hover CSS

Question

<div id="menu">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li ><a href="about_us.html">ABOUT US</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="enquiry.php">ENQUIRY</a></li>
                    <li><a href="contact_us.html">CONTACT US</a></li>
                </ul>
            </div>

CSS

#menu {
    width: 960px;
    padding: 0px;
    margin: 5px 0px 5px 0px;
    float: left;
    background-color: #a51c30;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
}
    #menu ul {
        list-style-type: none;
        margin: 0px;
        padding:0px;
}

        #menu ul li {
            margin: 0px 0px 0px 0px;
            width: 130px;
            text-align: center;
            float: left;
            display:block;
        }

            #menu ul li a {
                text-decoration: none;
                color: #FFFFFF;
                font-family: "Times New Roman", Times, serif;
                font-size: 16px;

            }

#menu li a:hover {
        background-color:#FFFFFF;
        color:#a51c30;
        border-top:1px solid black;
        border-left:1px solid black;
        border-right:1px solid black;
        padding:10px;
        display:block;


    }

Fiddle

As you can see in the fiddle, on hover the style is not applied to the list item space..!

enter image description here

I want the hover style to be applied like below

enter image description here

But in that there is no space at the sides and also it as a problem on hover the text appears white and the text is not visible, the fiddle of this part

What part should i edit?

@stackErr the styles are being applied but it is not occupying till the borders in the left and right, sorry for my english — Amarnath Balasubramanian
– Amarnath Balasubramanian, Commented Feb 7, 2014 at 18:55

blurfus · Accepted Answer · 2014-02-07 19:23:20Z

2

I added a fix to the li instead of the a, like this

#menu li:hover a{
    color:#a51c30;    
}

#menu li:hover{
    background-color:#FFFFFF;
    color:#a51c30;
    padding: 9px;
    border: 1px solid black;
}

Also added a few tweaks. Have a look a the fiddle: http://jsfiddle.net/5sJ6D/15/

answered Feb 7, 2014 at 19:23

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amarnath Balasubramanian Over a year ago

how to remove the space at the left side of home?

blurfus Over a year ago

I updated the fiddle jsfiddle.net/5sJ6D/16 - you needed to remove margin: auto; for #menu ul and remove a specified width from the #menu

user1627363 · Accepted Answer · 2014-02-07 18:54:57Z

1

You should use this #menu li:hover instead of #menu li a:hover, if that is what you mean. Try to be more clear the next time.

answered Feb 7, 2014 at 18:54

user1627363

1609 bronze badges

Collectives™ on Stack Overflow

Issue - Menu Hover CSS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related