CODEWITHSUNDEEP
htmlcsshover
BoneStarr
BoneStarr

Reputation: 195

Nav Menu Hover not working

I have been trying really hard to get my Hover feature of my navigation menu to work but its just not changing colour, any ideas?

It works if I dont have individual classes for the different list items but I want them to be in different colours but all change to the same colour when hovering.

    #container .navigationContainer .navigation
{
    float: right;
    margin: 44px 0 0 0;
    padding: 0; 
}

#container .navigationContainer .navigation ul
{
    list-style: none;   
}

#container .navigationContainer .navigation li.home
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #369ed1;
    border-top: solid 2px #369ed1;
}

#container .navigationContainer .navigation li.home a,
#container .navigationContainer .navigation li.home a:link,
#container .navigationContainer .navigation li.home a:active,
#container .navigationContainer .navigation li.home a:visited
{
    color: #369ed1;
    text-decoration: none;
    width: 156px;
}

#container .navigationContainer .navigation li.home a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}
#container .navigationContainer .navigation li.about
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #a6bb54;
    border-top: solid 2px #a6bb54;
}

#container .navigationContainer .navigation li.about a,
#container .navigationContainer .navigation li .about a:link,
#container .navigationContainer .navigation li .about a:active,
#container .navigationContainer .navigation li .about a:visited
{
    color: #a6bb54;
    text-decoration: none;
    width: 156px;
}

#container .navigationContainer .navigation li .about a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}
#container .navigationContainer .navigation li.portfolio
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #df3f89;
    border-top: solid 2px #df3f89;
}

#container .navigationContainer .navigation li.portfolio a,
#container .navigationContainer .navigation li .portfolio a:link,
#container .navigationContainer .navigation li .portfolio a:active,
#container .navigationContainer .navigation li .portfolio a:visited
{
    color: #df3f89;
    text-decoration: none;
    width: 156px;
}

#container .navigationContainer .navigation li .portfolio a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}
#container .navigationContainer .navigation .active
{
    margin: 0 0 0 26px;
    padding: 12px 0 0 0;
    width: 156px;
    display: inline;
    float: left;
    font: normal .75em "Times New Roman", Times, serif;
    color: #373431;
    border-top: solid 2px #373431;
}

#container .navigationContainer .navigation .active a,
#container .navigationContainer .navigation .active a:link,
#container .navigationContainer .navigation .active a:active,
#container .navigationContainer .navigation .active a:visited
{
    color: #373431;
    text-decoration: none;

EDIT:

html code:

<div class="navigation">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li class="about"><a href="about.html">About</a></li>
        <li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
      </ul>
    </div>

Upvotes: 0

Views: 296

Answers (5)

Cameron Landers
Cameron Landers

Reputation: 71

Note: I believe in specifically not re-writing the code for the original poster, but rather to provide general examples and guidelines on how the desired solution might be achieved, to wit:

There are many ways to do hover behavior, perhaps the easiest being to simply implement it in CSS.

Here is a simple HTML page with a CSS style block that defines a class called .menu-item and specifies hover behavior for that class:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* General body styles: */
        body {
            text-align: center;
            vertical-align: middle;
            font-family: verdana, arial, helvetica;
            font-size: 14px;
        }
        /* menu item class: */
        .menu-item {
            width: 180px;
            margin-left:12px;
        }
        /* menu item hover behavior: */
        .menu-item:hover {
            border-bottom: 5px;
            border-left: 0px;
            border-right: 0px;
            border-top: 0px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
    <!--    
    Specify the menu-item class on a set of  
    span elements to comprise the menu items: 
    -->
    <span class='menu-item'>Item 1</span><span class='menu-item'>Item 2</span><span class='menu-item'>Item 3</span>
</body>
</html>

I used span elements here for the menu items, but you could just as easily define some div elements with inline-block styles.

See a working example here:

http://conversiondynamics.com/hovertest.html

Cheers,
-=Cameron

Upvotes: 0

micp
micp

Reputation: 93

Think this might be what you're looking for.

I've cleaned your HTML/CSS up a little too (hope you don't mind!)

  <div class="navigation">
    <ul>
      <li class="nav-item home"><a href="index.html">Home</a></li>
      <li class="nav-item about"><a href="about.html">About</a></li>
      <li class="nav-item portfolio"><a href="portfolio.html">Portfolio</a></li>
    </ul>
  </div>

http://jsfiddle.net/LNkNL/

Take a look at the above Fiddle.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You could just set the block to <a> element that might work.

a{display: block;}

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

You can just write a:hover or .about a:hover instead of #container .navigationContainer .navigation li.about a:hover

a:hover
{
    color: #373431;
    border-top: solid 2px #373431;
}

DEMO

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

I notice that you're inconsistently referring to you <a> tags.

#container .navigationContainer .navigation li.portfolio a,
#container .navigationContainer .navigation li .portfolio a:link,
#container .navigationContainer .navigation li .portfolio a:active,
#container .navigationContainer .navigation li .portfolio a:visited
#container .navigationContainer .navigation li .portfolio a:hover

Should probably be

#container .navigationContainer .navigation li.portfolio a,
#container .navigationContainer .navigation li.portfolio a:link,
#container .navigationContainer .navigation li.portfolio a:active,
#container .navigationContainer .navigation li.portfolio a:visited
#container .navigationContainer .navigation li.portfolio a:hover

ie. <li>'s have the portfolio class. This would explain why hover isn't working.

Upvotes: 1

Related Questions