Мастерская: создаём меню [28/28] вопрос

Курсы §13. Мастерская: создаём меню
1

Возник вопрос:

Для того чтобы установить относительное позиционирование , мы используем селектор вида:
.main-menu > li {
position: relative;
}

Почему я не могу установить абсолютное позиционирование подменю, используя примерно такой же селектор, вида:

.sub-menu > li {
position: absolute;
}

А использую селектор, вида

.main-menu .sub-menu {

}

2

Потому что Ваше подменю - это и есть контейнер ul с классом sub-menu. А не только каждый по отдельности li внутри него. В плане первого - у Вас подменю привязывается к одному li-родителю списка выше, точнее, к каждому, а не ко всему контейнеру верхнего ul

3

Каша в ответе. ничего не понял :slight_smile:

4

Ну, если ответ - это каша, значит, читайте ещё раз уроки, о том, что такое ul и li. И в чём разница между ними. Надеюсь, на этот раз ответ понятен.

5

выводит 99%
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;
left:-1px;
top:-1px;
width:200px;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #e5e5e5;
}

.main-menu > li {
position: relative;
display: block;

}

.main-menu a {
color:#ffffff;
text-decoration:none;
display: block;

padding: 10px 10px;
 padding-left:15px;
background:#2980b9;
border-bottom: 2px solid #2c3e50;

}

.main-menu a:hover {
background: #1abc9c;
}

.main-menu .sub-menu {
position: absolute;
left: 180px;
display: none;
width: 200px;
margin: 0;
padding:0;
top:0px;
list-style: none;
background: #fcf8e3;
z-index:10;
}

.main-menu .sub-menu a {
padding-left:15px;
text-decoration:none;
background:#1abc9c;
color:#ffffff;
border-bottom: 2px solid #2ecc71;
}

.main-menu > li:hover .sub-menu {
display: block;
}

.main-menu .opened .sub-menu {
display:block;
}

.main-menu > .opened > a {
background: #1abc9c;
color: white;
}

6

понял теперь 100%
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;
margin: 0;
padding: 0;
list-style: none;

}

.main-menu > li {
position: relative;
display: block;

}

.main-menu a {
color:#ffffff;
text-decoration:none;
display: block;

padding: 10px 10px;
 padding-left:15px;
background:#2980b9;
border-bottom: 2px solid #2c3e50;

}

.main-menu a:hover {
background: #1abc9c;
}

.main-menu .sub-menu {
position: absolute;
left: 180px;
display: none;
width: 200px;
margin: 0;
padding:0;
top:0px;
list-style: none;
background: #fcf8e3;
z-index:10;
}

.main-menu .sub-menu a {
padding-left:15px;
text-decoration:none;
background:#1abc9c;
color:#ffffff;
border-bottom: 2px solid #2ecc71;
}

.main-menu > li:hover .sub-menu {
display: block;
}

.main-menu .opened .sub-menu {
display:block;
}

.main-menu > .opened > a {
background: #1abc9c;
color: white;
}

7

не буду плодить тем, спрошу здесь: почему-то результат кода дает подменюшке сдвиг влево, хотя в моем окне все показывает, как нужно на макете (внизу показано прозрачным). подскажите, это глюк в системе или ошибка в коде таки?

%D0%91%D0%B5%D0%B7%20%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8
Без имени.png1902×840 104 KB

код:

html,
body {
margin: 0;
padding: 0;
}

body {
width: 200px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}

.main-menu {
margin: 0;
padding: 0;
list-style: none;
}

.main-menu a {
padding: 10px 15px;
display: block;
color: white;
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;
text-decoration: none;
}

.main-menu .open a {
background-color: #1abc9c;
}

.main-menu .sub-menu {
position: absolute;
right: 250px;
top: 51px;
display: block;
list-style: none;
}

.sub-menu a {
border-bottom: 2px solid #2ecc71;
}

8

много ошибок. отступы не обнулены(некликабельное пространство от вложенного списка на ссылках), родителю не задано относительное позиционирование, нет ширины кнопок

9

Помогите, пожалуйста. Хочу добить 100%, но не знаю в чем ошибка.
html,
body {
margin: 0;
padding: 0;
}

body {
width: 380px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}

.main-menu{
display:block;
list-style:none;
margin:0;
padding:0;
}

.main-menu>li{
width:170px;
background:#2980b9;
padding:10px 15px;;
border-bottom: solid 2px #2c3e50;
}

.main-menu>li>a{
  text-decoration:none;
 position:relative;
  color:white;
  
  }
  
  
  .main-menu .open{
    background:#1abc9c;
   
    }
    
    .sub-menu{
      display:block;
      position:absolute;
      list-style:none;
      left:190px;
      top:51px;
      width:160px;
      height:120px;
      background:#1abc9c;
      
      }
      .open > a {
      background-color: #1abc9c;

}
.sub-menu a{
color:white;
text-decoration:none;

        }
        
        .sub-menu li{
          padding:10px;
          margin-left:-35px;
          display:block;
          border-bottom:solid 2px #2ecc71;
          }
11

Добрый день!
Можно сделать следующее:

  1. увеличить высоту sub-menu на 1 пиксель;
  2. У .sub-menu li внешний отступ сделать -40px, а внутренний отступ слева увеличить до 15px, чтобы текст на место вернуть после уменьшения внешнего отступа.