WedX - журнал о программировании и компьютерных науках

Как сделать горизонтальное подменю

Перед моим английским немного. Так что мне очень жаль.

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

введите здесь описание изображения

Список подменю должен располагаться рядом.

Но моя проблема. Мой список не происходит бок о бок в классе подменю.

EDIT Если я пишу постоянную ширину для #dl_menu .sub-menu, все в порядке. Но в моем .sub-меню может быть 3 элемента, может быть, 6 элементов, и мое подменю меняет ширину. не так ли. ? Поэтому я не могу написать постоянную ширину.

Пример как эта ссылка.

https://jsbin.com/fulekulo/7/edit?html,css,output

Спасибо за помощь. Спасибо.

html css
12.06.2014

  • Удалить position:relative из #dl_menu li 12.06.2014

Ответы:


1

Измените CSS своего меню следующим образом

#dl_menu .sub-menu {
    display: table;
    position: absolute;
    padding: 0;
    right: 0;
    top: 40px;
    float: left;
    width: 304px;
    left: 0px;
    top: 30px;
}

введите здесь описание изображения

12.06.2014
  • Сначала спасибо за помощь @Sid. Я редактирую свою проблему. Посмотрите еще раз, пожалуйста. ? 12.06.2014
  • У вашего родителя Ul нет такой большой ширины, поэтому в этом случае вам нужно динамически устанавливать ширину, используя JQuery Like If First Click, затем $(#dl_menu .sub-menu).width('300px') и когда второе меню щелкает $(#dl_menu .sub-menu).width('400px') и так далее. 12.06.2014

    • 2 
    #dl_menu .sub-menu{width:400px;}

    https://jsfiddle.net/kisspa/dsx8R/

    12.06.2014
  • потому что ваше подменю - это display:table... поэтому ширина: вы обычай 12.06.2014
  • Сначала спасибо за помощь. Я редактирую свою проблему. Посмотрите еще раз, пожалуйста. ? 12.06.2014
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]