Выпадающее меню, которое открывается вверх / вверх с помощью чистого css

ProgramBox

Выпадающее меню, которое открывается вверх / вверх с помощью чистого css

Post author:admin
Запись опубликована:22 февраля, 2023
Post category:Вопросы по программированию

#html #css #drop-down-menu #menu

#HTML #css #выпадающее меню #меню

Вопрос:

Я создал выпадающее меню с использованием чистого CSS, и я поместил его в то место, которое мне нравится, за исключением того, что я хочу, чтобы оно было «выпадающим», а не «выпадающим», поскольку строка меню находится в нижней части макета. Что мне нужно добавить или изменить, чтобы сделать его «выпадающим»?

 #menu * { 
  padding:0; 
  margin: 0; 
  font: 12px georgia; 
  list-style-type:none;
}
#menu { 
  margin-top: 100px;
  float: left;
  line-height: 10px; 
  left: 200px;
}
#menu a { 
  display: block; 
  text-decoration: none; 
  color: #3B5330;
}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover { 
  background: #ECF1E7; 
  padding-left:9px;
  border-left: solid 1px #000;
}
#menu ul li ul li {
  width: 140px; 
  border: none; 
  color: #B0BD97;  
  padding-top: 3px; 
  padding-bottom:3px; 
  padding-left: 3px; 
  padding-right: 3px; 
  background: #B0BD97;
}
#menu ul li ul li a { 
  font: 11px arial; 
  font-weight:normal; 
  font-variant: small-caps; 
  padding-top:3px; 
  padding-bottom:3px;
}
#menu ul li {
  float: left; 
  width: 146px; 
  font-weight: bold; 
  border-top: solid 1px #283923; 
  border-bottom: solid 1px #283923; 
  background: #979E71;
}
#menu ul li a { 
  font-weight: bold;
  padding: 15px 10px;
}
#menu li {
  position:relative; 
  float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
  display:none;
  list-style-type:none;
  width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
  display:block;
}
#menu:hover ul li:hover ul li:hover ul {
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}
#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
}

 <div id="menu">
  <ul>
    <li><center><a href="X">Home</a></center>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Disclaimer</a></li>
      </ul>
    </li>	
    <li>
      <center><a href="#">Practice Areas</a></center>
      <ul>
        <li><a href="#">Civil Law</a></li>
        <li><a href="#">Criminal Law amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; amp;rsaquo;</a>
          <ul>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">WordPress</a></li>
          </ul>
        <li><a href="#">Family Law amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp;amp;nbsp;amp;nbsp; amp;rsaquo;</a>
          <ul>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">WordPress</a></li>
          </ul>
        <li><a href="#">Personal Injury amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;rsaquo;</a>
          <ul>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">WordPress</a></li>
          </ul>
        <li><a href="#">Traffic Offenses amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;rsaquo;</a>
          <ul>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">WordPress</a></li>
          </ul>
        <li><a href="#">FAQ</a>	</li>
      </ul>
    </li>

    <li><center><a href="#">Attorney</a></center>
      <ul>
        <li><a href="#">X</a></li>
        <li><a href="#">X</a></li>
        <li><a href="#">X</a></li>
        <li><a href="#">X</a></li>
      </ul>
    </li>

    <li><center><a href="#">Contact Us</a></center>
      <ul>
        <li><a href="#">Locations amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp; amp;nbsp;amp;nbsp;amp;nbsp;amp;rsaquo;</a>
          <ul>
            <li><a href="#">Rockville Office</a></li>
            <li><a href="#">Frederick Office</a></li>
            <li><a href="#">Greenbelt Office</a></li>
          </ul>
        <li><a href="#">Phone Directory</a></li>
        <li><a href="#">Mailing Address</a></li>
      </ul>

    </li>

    <li><center><a href="#">Resources</a></center>
      <ul>
        <li><a href="#">Helpful Links</a></li>
        <li><a href="#">Affiliates amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;rsaquo;</a>
          <ul>
            <li><a href="#">Healthcare Providers</a></li>
            <li><a href="#">Insurance Companies</a></li>
          </ul>
        </li></ul>
    <li><center><a href="#">News amp;amp; Events</a></center>
      <ul>
        <li><a href="#">Press Articles</a></li>
        <li><a href="#">Newsletter</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    <li><center><a href="#">Espanol</a></center>
      <ul>
        <li><a href="#">X</a></li>
      </ul>

  </ul>
</div>

1. не могли бы вы также предоставить разметку HTML или демонстрационный сайт?

2. Спасибо за этот вопрос! просто у меня был один. Требуется выпадающее меню. И не нашел хорошего руководства на YouTube.

Ответ №1:

Добавить bottom:100% в ваше #menu:hover ul li:hover ul правило

Демонстрация 1

 #menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%; /* added this attribute */
}

Или, что еще лучше, чтобы предотвратить тот же эффект, что и в подменю, просто добавьте это правило

Демонстрация 2

 #menu>ul>li:hover>ul { 
    bottom:100%;
}

Демонстрация 3

источник: http://jsfiddle.net/W5FWW/4 /

И чтобы вернуть границу, вы можете добавить следующий атрибут

 #menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}

1. О, ты потрясающий, спасибо! Но у меня есть дополнительный нюанс: когда меню переворачивается, верхняя граница строки главного меню исчезает (даже когда вы начинаете прокручивать подменю), этого не происходит, тогда меню переворачивается вниз, есть мысли?

2. @Jenna добавила еще одну демонстрацию и правило. Это должно устранить проблему с границей.

3. Еще раз спасибо, работает отлично! Я бы дал вашему ответу ^ 1, но у меня недостаточно очков.

4. @user1574041 Конечно! просто примените соответствующие атрибуты перехода к тому, что вам нужно анимировать (например #menu a {transition:background-color 0.2s;} ). смотрите здесь

5. @user1574041 Да, это действительно возможно, но для реализации потребуется некоторая работа. Вот пример: jsfiddle.net/W5FWW/583 . Мой использует атрибут css bottom для своей анимации. Однако одной из основных проблем с ним является тот факт, что оно скрывает подменю за основной навигацией.

Ответ №2:

Если мы используем выбранный выпадающий список, то мы можем использовать приведенный ниже css (не требуется JS / jQuery)

 <select chosen="{width: '100%'}" ng- 
   model="modelName" class="form-control input- 
   sm"
   ng- 
   options="persons.persons as 
   persons.persons for persons in 
   jsonData"
   ng- 
   change="anyFunction(anyParam)" 
   required>
   <option value=""> </option>
</select>
<style>   
.chosen-container .chosen-drop {
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;
}

.chosen-container.chosen-with-drop .chosen-single {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    background-image: none;
}

.chosen-container.chosen-with-drop .chosen-drop {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    box-shadow: none;

    margin-bottom: -16px;
}
</style>