Как исправить подменю? [28/28]

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
{
    padding:0px;
    margin:0px;
    list-style:none;
    width: 200px;
}
.main-menu > li
{
    position:relative;
    /*display: block;*/
    /*background: #2980B9;*/
}
.main-menu > li > a
{
    background: #2980B9;  
    display: block;
    border-bottom: 2px solid #2C3E50;
    text-decoration:none;
    padding: 10px 15px;   
    color:white;
}
.main-menu > .opened > a
{
    background:#1ABC9C;
    display:block;
    border-bottom: 2px solid #2C3E50;
    /*width: 170px;*/
}
.main-menu .sub-menu
{
    position:absolute;   
    left:170px;
    top:0px;
    list-style: none;
    background:#1ABC9C;
    
    z-index:10;
    
}
.main-menu .opened .sub-menu li a
{
    text-decoration:none;
    display:block;
    color:white;
    border-bottom:2px solid #2ECC71;
    padding: 10px 15px;
}

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

1 лайк

Спасибо, помогло

1 лайк

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;
}

a
{
color:#FFFFFF;
text-decoration:none;
}
.main-menu
{
margin:0px;
padding:0px;

}

.main-menu > li
{
z-index:8; /<<<-----!!!1/
position:relative;
width:175px;
list-style:none;
background-color:#2980B9;
border-bottom:2px solid #2C3E50;
padding:10px;
padding-left:15px;
}

.main-menu > li > .sub-menu
{
z-index:100; /<<<----!!!1/
position:absolute;
list-style:none;
padding:0px;
background-color:#1ABC9C;

left:180px;
bottom:-84px;
}

.main-menu > li > .sub-menu > li
{
padding:10px;
padding-left:15px;
border-bottom:2px solid #2ECC71;
width:175px;
}

.main-menu .opened
{
background-color:#1ABC9C ;
}

Наложение (z-index) странно повело себя: подменю закрывает только лишь пункт “курсы”. Пробовал z-index прописать для .main-menu - не изменилось. В чем дело?

еще страньше: убрал z-index в .main-menu > li и все получилось, нужно пояснение: как так? Ведь убранная 10-ка была меньше сотки.

Свойство z-index является достаточно сложным для понимания.
В данном случае всё зависит от того, что подменю является дочерним элементом по отношению к главному меню.И если главному вы задаете z-index: 8; то поскольку подменю - элемент вложенный и будь у него написано хоть z-index: 1000; считается, что z-index у них одинаковый (наследуется) и сверху будет тот элемент, который в коде написан выше. Это главное меню.
Когда вы убираете z-index у главного меню (свойство возвращается в значение по умолчанию - auto), то для подменю вам хватает z-index: 1; , чтобы поднять его наверх.
Статья по теме.

5 лайков

100% variant

 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{
    list-style:none;
    margin:0;
    padding:0;
    background:#2980B9;
    width:200px;
    }
.main-menu li{
    border-bottom: 2px solid #2C3E50;
    padding:10px;
    padding-left:15px;
    position:relative;
    } 

.main-menu a{
    text-decoration:none;
    color:#fff;
    }    
.main-menu .sub-menu{
    margin:0;
    padding:0;
    position:absolute;
    list-style:none;
    left:180px;
    top:0px;
    width:200px;
    background:#1ABC9C;
    
    
    } 
.main-menu .sub-menu li{
    border-color:#2ECC71;
    z-index:10;
    }  
  
.main-menu li:nth-child(2){
    background:#1ABC9C;
    }

Доброго всем дня!
прошел испытание 28/28 меню на 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{
margin: 0;
padding: 0;
width: 200px;
}

.main-menu .sub-menu {
padding: 0;
list-style: none;
width: 200px;
position: absolute;
left: 190px;
top: 51px;
}
.main-menu a {
text-decoration: none;
color: #FFFFFF;
display: block;
background: #2980B9;/синий/
padding: 10px 15px;
border-bottom: 2px solid #2C3E50;
}

.main-menu > .opened > a,
.main-menu > .opened .sub-menu a{
background: #1ABC9C;/темно-зеленый/
border-bottom: 2px solid #2C3E50;
}
.main-menu > .opened .sub-menu a{
border-bottom: 2px solid #2ECC71;
}
`
Но здесь не задавал относительное позиционирование элементам главного списка, поэтому .main-menu .sub-menu пришлось задавать left: 190px; и top: 51px.
Чем плох такой подход?

Плох тем что ваши координаты заданы относительно окна браузера, и если размеры окна будут больше, а меню например не вверху страницы, а посередине, то координаты будут совсем другие.
Когда элементам списка задано относительное позиционирование, то уже они являются системой отсчета координат. И где бы не находилось меню, подменю будет на своем месте.
А в рамках задания годится и первый и второй вариант.

1 лайк

Такой вариант лучше?
`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{
margin: 0;
padding: 0;
width: 200px;
}
.main-menu li{
position:relative;
}

.main-menu .sub-menu {
padding: 0;
list-style: none;
width: 200px;
position: absolute;
left: 180px;
top: 0px;
z-index: 1;
}
.main-menu a {
text-decoration: none;
color: #FFFFFF;
display: block;
background: #2980B9;/синий/
padding: 10px 15px;
border-bottom: 2px solid #2C3E50;
}

.main-menu > .opened > a,
.main-menu > .opened .sub-menu a{
background: #1ABC9C;/темно-зеленый/
border-bottom: 2px solid #2C3E50;
}
.main-menu > .opened .sub-menu a{
border-bottom: 2px solid #2ECC71;
}`
Спасибо за оперативность.

Лучше)

Подскажите, пожалуйста, почему не пускает дальше? с виду всё нормально и работает:

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 {
margin: 0;
padding: 0;
}

.main-menu li a {
display: block;
background-color: #2980B9;
text-decoration: none;
padding: 10px 15px;
border-bottom: 2px solid black;
color: white;
width: 170px;
}

.main-menu .opened a {
background-color: #1ABC9C;
}

.main-menu li {
position: relative;
}

.main-menu .sub-menu {
padding: 0;
position: absolute;
display: none;
list-style: none;
top: 0;
left: 180px;
z-index: 10;
width: 200px;
border-color: #2ECC71;
}

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

.main-menu .opened .sub-menu a{
border-bottom: 2px solid #2ECC71;
}`

Не совсем нормально… Маркеры у списка не убрали, рамка снизу не того цвета, а подменю должно быть сразу “выпавшим”, а не только при наведении.

2 лайка

Подскажите, плиз, куда поставить absolute, а куда relative?
Если ставлю position: absolute вот сюда .main-menu .sub-menu a { то происходит схлопывание элементов блока.

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

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

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

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

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

Для relative вам придется отдельно правило дописать, нет у вас нужного селектора - .main-menu > li.
Absolute - для .sub-menu.

1 лайк

Ineska, спасибо за помощь. Подправил. Есть вопрос:
При задании absolute блок не упирается в родительский (relative), а примыкает только при top: 0px;. Он не должен сразу “прилипать” к топу?

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

Нет, потому что значение top по умолчанию (без переопределения) не равно нулю.

1 лайк

Блин я в шоке, люди что проходят обучения не вникая в содержимое вообще)и темы плодят с одними и теми же вопросами практически) Ineska тебе памятник за терпение надо поставить))) ежедневно отвечать на кучу одинаковых тем)

Не надо памятник, я еще жить хочу))
Темы не всегда одинаковые, кстати. И в чужих ошибках тоже есть что почерпнуть)

1 лайк

В последнее время вижу одно и тоже, отвечаю уже на более интересные случаи. Подчерпывать только если тем кто новенький на форуме и проэкте и ищет альтернативное решение задачи. Или тем кто конкретно задает вопрос что не понял какое то свойство или тег:)