CODEWITHSUNDEEP
htmlcssmenu
Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Issue - Menu Hover CSS

<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

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?

Upvotes: 0

Views: 76

Answers (2)

blurfus
blurfus

Reputation: 14031

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/

Upvotes: 2

user1627363
user1627363

Reputation: 160

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.

Upvotes: 1

Related Questions