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>
```
It would work **only** with sibbling elements that are **next** in the flow.

You could use a `<nav>` and plain `<a>` restyled as list items (`<li>`) to keep a coherent HTML5 structure that can also do the desired styling effect :

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

.shows:hover~.dropdown {
  display: block;
}
/* make those <a> look like <li>s resetting major default li rules */
.navmenu>a {
  display: list-item;
  margin-left: 2em;
}
```

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

use `~` instead `+` since element to show is not right after but somwhere after.