Как перейти к заголовкам моего подменю, когда я нажимаю на них? / Как я могу перейти к заголовкам подменю с других страниц?

---

Привет.

Я хотел бы знать, как я могу перейти к своим конкретным заголовкам, когда я нажимаю на подменю. Если я нахожусь на странице с подменю (theme.html) и я нажимаю на любой из заголовков подменю, он ничего не делает. Когда я нажимаю на заголовок подменю с любой другой страницы (index.html, contact.html и т. д.), Я могу пойти в theme.html страница, но я не могу перейти к конкретному заголовку, на который я нажал. Вместо этого я просто оказываюсь на вершине theme.html страница.

Что мне изменить(CSS/HTML), чтобы при нажатии на заголовок подменю я переходил к этому конкретному заголовку на моем компьютере? theme.html Пейдж?

Вот моя фотография theme.html страница и заголовки подменю, а также заголовки на самой странице.

[ИМГ]http://i68.tinypic.com/4jnn6f.jpg[/ИМГ]

Кроме того, вот HTML-код для theme.html навигация:

<div class="site-container">
  <div class="menu">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li class="has-child">
          <a href="theme.html">Theme/Genre</a>
          <ul>
            <li><a href="#Horror">Horror</a></li>
            <li><a href="#Sci-Fi">Sci-Fi</a></li>
            <li><a href="#Survival">Survival</a></li>
            <li><a href="#Pirate">Pirate</a></li>
            <li><a href="#RPG">RPG/Fantasy</a></li>
            <li><a href="#Space">Space</a></li>
            <li><a href="#Apocalypse">Nuclear Apocalypse</a></li>
         </ul>
        </li>
        <li><a href="top.html">Top Solo Games of 2017</a></li>
        <li><a href="variants.html">Variants</a></li>
        <li><a href="about.html">About Me</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
  </div>

И CSS для навигации:

.site-container {position: relative;}

.menu {position: fixed;
       top: 30;
       left: 0;
       z-index: 2;
       width: 200px;}

.menu ul {
  padding: 0;
  background: #C5C5C5;
  margin-top: 0;
  list-style: none;
}

.menu ul li a {
  display: block;
  padding: 5px;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.menu ul li a:hover {
  color: white;
}

.menu ul li.has-child {
  background: #5B5B5B;
  position: relative;
}

.menu ul li.has-child ul {
  display: none;
  background: #8E8E8E;
  position: absolute;
  left: 100%;
  top: 0;
  }

.menu ul li.has-child:hover ul{
  display: block;
}

main {
  padding-left: 210px;
  padding-right: 10px;
}

main h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.theme-item {
  border: 4px solid black;
  padding: 20px;
  margin-bottom: 50px;
}

.theme-title {
  z-index: 1;
  position: relative;
  margin-bottom: 40px;
}

.theme-title:before {
  position: absolute;
  content: '';
  display: block;
  width: 80%;
  height: 3px;
  background: black;
  top: calc(100% + 10px);
  left: 0;
}

.games-list {
  padding: 0;
  list-style: none;
}

.games-list .game {
  width: 100%;
  margin-bottom: 30px;
}

/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {content: '';
                         display: table;
                         clear: both;}

.games-list .game img {float: left;}

.games-list .game .description {float: left; 
                                padding-left: 15px;}

Что я уже пробовал:

Я пробовал искать на многих форумах, касающихся подменю, но не смог найти никаких ответов, касающихся моей конкретной проблемы.

---