I've been searching through multiple blogs without finding a solution to my issue. Perhaps you can help me out.
In the first ul (with class .first), I need to apply a different background to each li. To achieve this, I attempted to use pseudo-elements for learning purposes. I adjusted the selector numbers for each li element and utilized :after to move the image background with an absolute position. Here is the CSS code snippet:
> ul li:nth-child(1) a:hover:after
> ul li:nth-child(2) a:hover:after
etc
To add complexity, the second ul (with class .dropdown) should have a distinct background from the li elements in ul.first. However, all li items in ul.dropdown should share the same background. When I added a background, the problem arose - it displayed the background of ul.first. I want the CSS to specifically target the li elements of ul.first, allowing me to separately style ul.dropdown.
This is the HTML structure:
<nav>
<a href="index.html">
<h1 class="sprites-logo- ir">cepods</h1>
</a>
<ul class="first">
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">how we work</a>
</li>
<li class="dropli">
<a href="#">design<i class="icon-right-open"></i></a>
<ul class="dropdown">
<li>
<a href="#">restaurant</a>
</li>
<li>
<a href="#">retail</a>
</li>
<li>
<a href="#">event space</a>
</li>
<li>
<a href="#">bar</a>
</li>
<li>
<a href="#">living</a>
</li>
<li>
<a href="#">hotel</a>
</li>
</ul>
</li>
<li>
<a href="#">news</a>
</li>
<li>
<a href="#">faq</a>
</li>
</ul>
</nav>