Я хочу, чтобы выпадающие пункты меню находились внутри вертикальной панели - PullRequest
Новая
       1

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

0 голосов
/ 25 марта 2020

Это то, что я делал ... Я попробовал несколько вещей, которые я нашел в Интернете, например, создание кнопки со списком, но она не работает s, может кто-нибудь, пожалуйста, помогите мне 

.vertical-menu {
    display: block;
    /*padding-top: 150px;*/
    margin-left: 50px;
    width: 200px; /* Set a width if you like */
    height: 200px;
    margin-bottom: 50%;
}

.vertical-menu a {
  background-color: #eee !important; /* Grey background color */
  color: black !important; /* Black text color */
  display: block !important; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc !important; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #4CAF50 !important; /* Add a green color to the "active/current" link */
  color: white !important;
}
<div class="vertical-menu">
              <a href="#" class="">Home</a>
              <div class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#" >Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                  </ul>
              </div>
              <a href="#">Link 3</a>
              <a href="#">Link 4</a>
              <a href="#">Link 5</a>
              <a href="#">Link 6</a>
              <a href="#">Link 7</a>

это не тот же вывод, но я хочу сказать, что пункты выпадающего меню не находятся внутри вертикального меню ... Я не знаю, парни ли вы понимаю меня, но я надеюсь, что вы есть.

Редактировать:

Я хочу сделать что-то вроде этого enter image description here

Ответы [ 2 ]

1 голос
/ 25 марта 2020

В этом примере подменю имеет отступ, достигнутый с помощью дополнительного css. Пожалуйста, прокомментируйте, если вы хотите другой вид внешнего вида (коробки? Нестандартные маркеры?). Я также удалил несколько важных символов, которые были разбросаны вокруг css.

Надеюсь, это поможет 

.vertical-menu {
  display: block;
  /*padding-top: 150px;*/
  margin-left: 50px;
  width: 200px;
  /* Set a width if you like */
  height: 200px;
  margin-bottom: 50%;
}

.vertical-menu a {
  background-color: #eee;
  /* Grey background color */
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}


/*extra css*/

.dropdown-menu {
  display: none;
  margin: 0px 0px 0px 12px;
  padding: 3px 6px;
}

.dropdown {
  background-color: #eee;
}

.dropdown ul {
  position: relative;
  list-style-type: none;
  margin: 0px 0px 0px 12px;
  background-color: #eee;
  padding-left: 0px;
  padding-bottom: 6px;
}


.vertical-menu .dropdown ul a {
  padding: 6px;
}

.dropdown-toggle:hover>.dropdown-menu {
  display: block;
}


/* end extra*/

.vertical-menu a:active {
  background-color: #4CAF50;
  /* Add a green color to the "active/current" link */
  color: white;
}
<div class="vertical-menu">
  <a href="#" class="">Home</a>
  <div class="dropdown">
    <ul class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span>
      <ul class="dropdown-menu">
        <li><a href="#">Page 1-1</a></li>
        <li><a href="#">Page 1-2</a></li>
        <li><a href="#">Page 1-3</a></li>
      </ul>
    </ul>
  </div>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
</div>
0 голосов
/ 25 марта 2020

этот ответ от W3. Используйте тег выбора 

<!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list:</p>

<label for="cars">Choose a car:</label>

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...