Почему я не могу поместить выпадающее меню под кнопку?

Question

Я сейчас так отчаялся.Пробовал 2 дня, чтобы решить эту проблему, но все еще безрезультатноВыпадающее меню не может быть помещено под ситуацию и кнопку тренировки правильно.Он показан слева от панели навигации вместо нижней части кнопки, что может быть из-за того, что я использовал float left в строке 19 CSS в скрипте:

.navbar a,.sit,.exercise {
   float:left; 
}

класс «navbar» предназначен для всегоnavbar

класс «dropdown1» предназначен для следующего: класс «sit» предназначен для кнопки «ситуация», класс «situ» предназначен для выпадающего меню в «sit»

class «dropdown2«предназначен для следующего: класс« упражнение »предназначен для кнопки« упражнение », класс« exec »предназначен для выпадающего меню в« упражнении »

Я попытался поместить положение: относительное в класс« сидеть »и класс "упражнение".Однако в результате в раскрывающемся меню появляется полоса прокрутки, и вам нужно прокрутить ее вниз, чтобы увидеть все меню.Положение даже не меняется!

вот код в скрипке https://jsfiddle.net/zo0raL86/

Я ожидаю, что выпадающее меню может быть показано под правой кнопкой.Очень надеюсь, что вы можете помочь мне!Большое вам спасибо

Answer 1

Ваша основная проблема в том, что вы установили все свои поплавки на дочерние элементы тех элементов, которые вы на самом деле хотите выпустить. Например: У вас есть

.navbar a,.sit,.exercise {
    float:left;
    width: 32.78%;
}

Принимая во внимание, что поплавок: слева; и ширина должна быть на их родительских элементах .i3, .dropdown1 и .dropdown2, вот так ...

.i3,
.dropdown1,
.dropdown2 {
    width: 33.333%;
    float: left;
}

Это решит основы вашей проблемы и проблему дополнительной ширины, которую вы выразили в скрипке.

Еще лучше установить ширину .sit и .exercise на 100%.

Я обновил вашу скрипку здесь , чтобы вы могли видеть код на месте.

Answer 2

Добавьте это к вашей таблице стилей:

.navbar > div{
  display: inline-block;
  width: 32.78%;
}

Затем добавьте несколько пикселей к top -значению .situ и .exec, тогда оно будет отображаться прямо под кнопкой.

Я также обновил ваш html.

<div class="navbar">
   <div class="i3">
     <a href="About.asp">About</a>
   </div>

   <div class="dropdown1">    
    <a href="#">Situation
      <div class="situ">
        <a href="situation1.asp">s1</a>
        <a href="situation2.asp">s2</a>
        <a href="situation3.asp">s3</a>
      </div>       
    </a>
   </div>

   <div class="dropdown2">
    <a href="#">Exercise
      <div class="exec">
        <a href="exercise1.asp">e1</a>
        <a href="exercise2.asp">e2</a>
        <a href="exercise3.asp">e3</a>
      </div>       
    </a>
   </div>     
</div>

Удалите значение bottom из раскрывающихся списков и добавьте

.situ, .exec{
  top: 123px;
}

Значение должно быть суммой ваших margin-top иheight для плавного размещения под навигацией.