Как я могу сделать выпадающее меню в моем текущем меню - PullRequest
Новая
       2

Как я могу сделать выпадающее меню в моем текущем меню

0 голосов
/ 28 октября 2018

В настоящее время у меня есть меню навигации с несколькими предметами.Один предмет имеет титул снаряжения.Когда я наводю на него курсор, появляются Throwables и Gear.Это то, что у меня сейчас есть, я хочу иметь другое меню, которое открывается при наведении курсора на Throwables или Gear.Я пробовал разные вещи, такие как добавление еще одного ul или li между li из Gear, но каждый раз, когда я повторял что-то подобное, мое меню дыр становилось странным.Я искал на YouTube / Google, но не смог заставить его работать так, как я хочу.

Короче говоря: я хочу еще одно выпадающее меню, когда наведу курсор на Throwables или Gear.Он должен открываться справа и иметь тот же синий цвет при наведении на него курсора Вот пример того, как он должен выглядеть (остальная часть меню находится слева от Equipment)

Часть кода меню: 

.navigatie_menu{
  position: absolute;
  left: 505px;
  top: 95px;
  z-index: 2;
}

ul {
  padding: 0px;
  list-style: none;
  color: black;
}

ul li {
  float: left;
  width: 130px;
  height: 40px;
  background: rgba(223,223,223,0.95);
  line-height: 40px;
  text-align: center;
  font-size: 17px;
  color: black;
}

    ul li a {
  text-decoration: none;
  color: black;
  display: block; 
}

ul li a:hover {
  background-color: #94bfea;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}
 <ul class="navigatie_menu">
  <li><a>Equipment</a>
    <ul>
      <li><a href="Equipment/Gear.html">Gear</a></li>
      <li><a href="Equipment/Throwables.html">Throwables</a></li>
    </ul>
  </li>			
</ul>

1 Ответ

0 голосов
/ 28 октября 2018

Что-то в этом роде? 

        .navigatie_menu {
            position: absolute;
            left: 505px;
            top: 95px;
            z-index: 2;
        }

        ul {
            padding: 0px;
            list-style: none;
            color: black;
        }

        ul li {
            float: left;
            width: 130px;
            height: 40px;
            background: rgba(223, 223, 223, 0.95);
            line-height: 40px;
            text-align: center;
            font-size: 17px;
            color: black;
        }

        ul li a {
            text-decoration: none;
            color: black;
            display: block;
        }

        ul li a:hover {
            background-color: #94bfea;
            display: block;
        }

        ul li ul li {
            display: none;
        }

        ul li:hover ul li {
            display: block;
        }

        .sub_menu1 {
            position: absolute;
            left: 130px;
            display: none;
        }

        .sub_menu2 {
            position: absolute;
            left: 130px;
            display: none;
        }


        .gear:hover .sub_menu1 {
            display: block;
        }

        .throwables:hover .sub_menu2 {
            display: block;
        }
<body>
    <ul class="navigatie_menu">
        <li><a>Equipment</a>
            <ul>
                <li class="gear"><a href="Equipment/Gear.html">Gear</a>
                    <ul class="sub_menu1">
                        <li><a href="#">subject1</a></li>
                        <li><a href="#">subject2</a></li>
                        <li><a href="#">subject3</a></li>
                        <li><a href="#">subject4</a></li>
                    </ul>
                </li>
                <li class="throwables"><a href="Equipment/Throwables.html">Throwables</a>
                    <ul class="sub_menu2">
                        <li><a href="#">subject1</a></li>
                        <li><a href="#">subject2</a></li>
                        <li><a href="#">subject3</a></li>
                        <li><a href="#">subject4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...