I have an unordered list in which I have a link which has the same background color as the hover on text, so when the particular list is hovered the text is hidden. I am trying to remove that effect from the particular list so that text in it is not hidden.

I did the following:

```html
<ul class="dropdown">
    <li class="active"><a href="index.html">Home</a></li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="about-us.html">TEIA</a></li>
            <li><a href="services-1.html">Board Members</a></li>
            <li><a href="services-2.html">Agenda</a></li>
            <li><a href="our-event.html">Vision & Mission</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Members</a>
        <ul>
            <li><a href="portfolio-overlay.html">Membership Type</a></li>
            <li><a href="portfolio-classic.html">Code of Conduct</a></li>
            <li><a href="portfolio-overlay.html">Membership Benefits</a></li>
            <li><a href="portfolio-classic.html">Register/Join</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul>
            <li><a href="blog.html">Upcoming Events</a></li>
            <li><a href="blog-grid.html">Previous Events</a></li>
            <li><a href="single-blog.html">Press Release</a></li>
            <li><a href="single-blog.html">Gallery</a></li>
        </ul>
    </li>
    <li><a href="contact-us.html">Contact Us</a></li>
    <li class="nyan" style="background-color: #00bfff; text-decoration: none;">
        <a href="#">Log In</a>
        <ul>
            <li><a href="blog.html">Admin</a></li>
            <li><a href="blog-grid.html">Members</a></li>
        </ul>
    </li>
</ul>
```

But still there is no change in it. Can anyone tell me what's wrong in my code?