Я пытаюсь получить это право на пару дней, и до сих пор я действительно не добился успеха в том, чтобы заставить раскрывающийся список работать вообще, хотя отчасти потому, что в руководствах, которые я прочитал, все используют символы в CSS, с которым я не знаком, например тильда и символы "больше, чем". В любом случае, вот базовый код, который у меня есть:
<nav class="bg">
<ul class="width">
<li><a href="#">Link</a></li>
<li><a href="#"></a>
<ul>
<li><a href="#" title="link">Link</a></li>
<li><a href="#" title="link">Link</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
.width{margin:0 auto;min-width:1000px;width:84%;}
nav ul{width:100%;text-align:justify;font-size:0;position:relative;}
nav ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;}
nav a{display:inline-block;padding:10px;}
Я думаю, что следующий шаг - поставить display:none;
на внутренних элементах <ul>
чтобы скрыть их по умолчанию, но следующая часть - это то место, где я теряюсь. Как вы используете CSS, чтобы сделать один объект, когда что-то происходит с другим объектом? В этом случае, как бы вы использовали CSS, чтобы выпадающий список отображался, когда соответствующая ссылка зависала?
Вот демонстрация
Прежде всего вам нужно понять, как работают CSS-селектора.
Для того, чтобы добавить Dropdown, вы переходите на наведение на родительский элемент и обертываете это вокруг подменю. Затем, если событие hover будет запущено, внутри будет возможность выбрать true: hover
Подобно:
.nav li:hover .sub-menu {
left: 0;
top: 100%;
}
Я также добавил эффект Fade-In. Там вы работаете с css-переходом. Но будьте осторожны, если ваше подменю будет включено/выключено с отображением: block и: no it wont work, я думаю.
U может поиграть с этим в этой скрипке, чтобы выкрикивать, что вы можете сделать, и как ваши изменения влияют на результат.
.nav .sub-menu {
position: absolute;
left: -1000px;
top: -1000px;
opacity: 0;
-o-transition: opacity .25s;
-ms-transition: opacity .25s;
-moz-transition: opacity .25s;
-webkit-transition: opacity .25s;
transition: opacity .5s;
}
.nav li:hover .sub-menu {
left: 0;
top: 100%;
opacity: 1;
}
Вы сами правильно указали проблему, и это:
Как вы используете CSS, чтобы сделать один объект, когда что-то происходит с другим объектом?
Я думаю, что это простейшая демонстрация, прольет некоторый свет на ваш вышеупомянутый вопрос.
В частности, более глубокий взгляд на CSS в демо.
#circle:hover .popup{
display : block;
}
Вы даже можете создать раскрывающийся список без использования каких-либо селекторов. Но важно знать о селекторах. Перейдите по этой ссылке, чтобы узнать больше о селекторах.
Вы можете посмотреть Pure CSS Dropdown Menu, чтобы узнать, как создать раскрывающееся меню css.
Как вы используете CSS, чтобы сделать один объект, когда что-то происходит с другим объектом? В этом случае, как бы вы использовали CSS, чтобы выпадающий список отображался, когда соответствующая ссылка зависала?
li > a ul { display: none; }
li > a:hover ul { display: block; }
Вы также можете играть с переходами, чтобы добавить эффект затухания.