Блог

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

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

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

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

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

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

вот код в fiddle https://jsfiddle.net/zo0raL86 /

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

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

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

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

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

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

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

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

Добавьте это в свою таблицу стилей:

 .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 , чтобы плавно вписываться в навигацию.