Question: I am currently developing an application for my Class Routine and it changes periodically in a 3-4 weeks.I have an application with local index files inside assets folder of an application. So I am looking for any suggestion to update only assets folder such that if Routine changes user can easily update the new Routine ( i.e content of assets folder only ) without the need to update the whole application. 
Thanks in advance.

Answer: 
You are using the [adjacent sibling selectors](https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors) `+`, and the `.shows` and `.dropdown` are not children of the same parent, and not adjacent. You'll have to move the `.dropdown` element to the same `<li>` in which `.shows` reside.

```css
.dropdown {
  display: none;
}

.shows:hover+.dropdown {
  display: block;
}
```

```html
<ul class="navmenu">
  <li><a href="#">HOME</a></li>
  <li>
    <a href="#" class="shows">SEASON</a>
    <ul class="dropdown">
      <li><a href="#">SHOWS</a></li>
      <li><a href="#">EVENTS</a></li>
    </ul>
  </li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>
```
You can use the CSS third-party ***axe*** library for this.

Here are two examples:

Select Next Sibling of Ancestor Element:
========================================

**Using `^` (select ancestor) and `+` (select next sibling)**

```css
.dropdown {
display: none;
}

.shows:hover ^ .navmenu + .dropdown {
display: block;
}
```

```html
<ul class="navmenu">
  <li><a href="#">HOME</a></li>
  <li><a href="#" class="shows">SEASON</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

<ul class="dropdown">
  <li><a href="#">SHOWS</a></li>
  <li><a href="#">EVENTS</a></li>
</ul>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>
```

Select Remote Element:
======================

**Using `\` (select remote element)**

```css
.dropdown {
display: none;
}

.shows:hover \ .dropdown {
display: block;
}
```

```html
<ul class="navmenu">
  <li><a href="#">HOME</a></li>
  <li><a href="#" class="shows">SEASON</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

<ul class="dropdown">
  <li><a href="#">SHOWS</a></li>
  <li><a href="#">EVENTS</a></li>
</ul>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>
```

---

**Further Reading on *axe* Selectors:**

<http://www.rounin.co.uk/projects/axe/axe2.html>