А задание точно верно звучит ?
Т.к. я оформил всё, как в примере, визуально только. Получил 100%
Но это было не выпадающее меню. Потом скрыл подменю через display:none. И через псевдокласс :hover задал всплывающее подменю. И проценты сразу сместились до “Тепло”. Хотя по идее всё правильно было сделано.
Всё правильно вы сделали. Но чтобы проверка смогла оценить результат, нужно чтобы выпадающее меню было зафиксировано в активном состоянии.
Не подскажите, код еще можно как-то сократить/оптимизировать или итак нормально?
.main-menu,
.sub-menu {
margin: 0;
padding: 0;
width: 200px;
list-style: none;
}
.main-menu > li {
position: relative;
background: #2980b9;
}
.main-menu a {
padding: 10px 15px;
text-decoration: none;
color: #fff;
border-bottom: 2px solid #2c3e50;
}
.main-menu .sub-menu {
position: absolute;
top: 0px;
left: 180px;
z-index: 10;
display: none;
}
.main-menu .sub-menu a {
border-bottom: 2px solid #2ecc71;
}
.main-menu a,
.main-menu > li:hover .sub-menu,
.main-menu .opened .sub-menu {
display: block;
}
.main-menu .sub-menu,
.main-menu .opened {
background: #1abc9c;
}Вот эта запись мне не совсем понятна. Поясните, для чего это?
Изначально, они шли подряд, что и натолкнуло на желание исключить дублирование. Ссылка, наверно, лишняя, но ничего не изменилось в негативную сторону.
/*механизм выпадания? не знаю как правильно обозначить*/
.main-menu > li:hover .sub-menu {
display: block;
}
/*открытое подменю*/
.main-menu .opened .sub-menu {
display: block;
}Почитайте о том, какие теги являются блочными элементами по умолчанию.
Что-то я совсем ничего не понимаю. Зачем тогда в задании Состояние «открытое подменю» нужно было использовать display: block или в задании и испытании описаны разные ситуации?
Обратите внимание, в этом правиле подменю скрыли сначала:
.main-menu .sub-menu {
position: absolute;
left: 1px;
display: none;
width: 150px;
margin: 0;
padding: 0;
list-style: none;
background: #fcf8e3;
}
А потом сделали видимым при наведении:
.main-menu > li:hover .sub-menu {
display: block;
}
Может быть мне нужно больше кофе и я что-то упускаю.
Вы хотите сказать, что такая группировка свойств меняет последовательность их применения и сначала сработает display: block, а лишь затем display: none речь об этом? Но ведь они и в другой записи идут ниже .main-menu .sub-menu. в котором записан display:none. Задание выполняла последовательно, сначала подобрала все размеры, цвета пр. затем убрала подменю, и только после этого закрепила.
Подменю по умолчанию открыто, как вложенный список. В том задании сначала его скрыли. Иначе дальнейшие действия в целях не имеют смысла, ведь подменю и так видно.
Итак, подменю скрыто и вам просят сделать его видимым при наведении. А потом просят снова закрепить (сделать открытым по умолчанию). Но делают это с помощью отдельного класса уже, который добавили для подменю - это opened.
У каждого элемента свойство display задано, оно может быть не прописано. Например, тег <р> является блочным элементом, а тег <а> по умолчанию строчным. Если элемент скрыли, удалили со страницы (display: none;), то чтобы вернуть его обратно, надо вспомнить его тип и написать display: block; или display: inline;
Поэтому я и говорила, что надо найти список блочных и строчных элементов, чтобы всегда был перед глазами, пока не запомните.
Оцените пожалуйста код:
html,
body {
margin: 0;
padding: 0;
}
body {
width: 380px;
min-height: 280px;
padding: 10px;
font-family: "Arial", sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu {
position: relative;
width: 200px;
list-style: none;
margin: 0;
padding: 0;
}
.main-menu li {
border-bottom: 2px solid #2c3e50;
}
.main-menu a {
background: #2980b9;
list-style: none;
padding: 10px 10px 10px 15px;
color: #ffffff;
display: block;
text-decoration: none;
}
.main-menu .opened a {
background: #1abc9c;
}
.main-menu .sub-menu {
display: none;
list-style: none;
position: absolute;
z-index 10;
left: 140px;
top: 41px;
}
.main-menu .sub-menu li {
width: 200px;
border-bottom: 2px solid #2ecc71;
}
.main-menu .opened:hover .sub-menu {
display: block;
}
/*Ниже пункт для принудительного открытия подменю*/
.main-menu .opened .sub-menu {
display: block;
}В целом хорошо. Только в данном случае логичнее задавать относительное позиционирование для .main-menu li. Координаты соответственно поменяются.
Еще одно… Это свойство не работает здесь, не хватает двоеточия.
И хотелось бы узнать, почему значение именно 10.
1 лайк
Не понимаю почему логичнеe именно .main-menu li задать относительное позиционирование, но попробую дойти до этого =).
Эх эти коварные двоеточия, постоянно с ними проблема.
А значение 10 просто так =).
Подскажите корректен ли код, его вид?
html,
body {
margin: 0;
padding: 0;
}
body {
width: 380px;
min-height: 280px;
padding: 10px;
font-family: "Arial", sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu
{
width:200px;
padding:0;
margin:0;
list-style: none;
}
.main-menu > li
{
padding:10px 15px;
border-bottom:2px solid #2c3e50;
position:relative;
background:#2980b9;
}
.main-menu li a
{
color:#ffffff;
text-decoration:none;
}
.main-menu .opened .sub-menu
{
display:block;
}
.main-menu > .opened
{
background:#1abc9c;
}
.main-menu .sub-menu
{
padding:0;
z-index:10;
position:absolute;
top:0px;
left:180px;
list-style: none;
background:#1abc9c;
width:200px;
}
.sub-menu li
{
border-bottom:2px solid #2ecc71;
padding:10px 15px;
}Размеры лучше задавать ссылкам, а не пунктам li. А так всё хорошо.
Кроме кочующего из варианта в вариант z-index. Кто-то один написал, и у всех дальше одно и то же.
Расскажете, почему именно 10?
Ну у вас в 22 уроке написано , и у меня запомнилось это, поэтому и использовал 10.
Что сказать… Логично.
Но всё равно изучите свойство, самостоятельно.
1 лайк