Mega dropdown menu background hover issue

Question

I am using CSS3 Mega Drop Down Menu on my site to create a menu bar. I have used a li ID of nodrop to stop the "Home" link on the page from creating a dropdown menu background:

<ul class="menu"><!-- BEGIN MENU -->

   <li id="nodrop"><a href="http://www.eco-fireplaces.co.uk">Home</a></li>

     <li><a href="" class="drop">Fireplaces</a><!-- Begin 1 column Item -->

        <div class="dropdown_1column"><!-- Begin 1 column container -->

            <div class="col_1 firstcolumn">

                <ul class="levels">

                    <li><a href="#">FreelanceSwitch</a></li>

                    <li><a href="#" class="parent">Creattica</a>
                        <ul>

CSS for the nodrop "Home" link:

.menu li#nodrop {
    z-index:2;
    float:left;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    background:none;
    border:none;
}

For some reason, the colour of the "Home" link is still changing to white making it invisible on the page background (as this is also white). I assume the problem lies in the CSS file here:

.menu li:hover a {
    color:#ffffff;
    text-shadow: none;
}

The above works fine for the "Fireplaces" link but how do I make my "Home" link green?

Do I have to include the li ID #nodrop into the .menu li:hover a CSS and if so how do I do that?

Any help and advice would be very much appreciated.

You can see an example of the Home link disappearing on my web page (see link below)

link to my site > http://www.eco-fireplaces.co.uk/fireplaces.html

Answer 1

Yes, You have to include the ID of the Div too, as

li#nodrop:hover a
{
color:green;
text-shadow: none;
}

try setting the above class in your css file and check it works or not.

Thanks Prashant