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;
}
Попробуйте для подменю обнулить паддинг: отступы добавляются браузером по умолчанию.
Спасибо, помогло
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; , чтобы поднять его наверх.
Статья по теме.
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.
Чем плох такой подход?
Плох тем что ваши координаты заданы относительно окна браузера, и если размеры окна будут больше, а меню например не вверху страницы, а посередине, то координаты будут совсем другие.
Когда элементам списка задано относительное позиционирование, то уже они являются системой отсчета координат. И где бы не находилось меню, подменю будет на своем месте.
А в рамках задания годится и первый и второй вариант.
Такой вариант лучше?
`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;
}`
Не совсем нормально… Маркеры у списка не убрали, рамка снизу не того цвета, а подменю должно быть сразу “выпавшим”, а не только при наведении.
Подскажите, плиз, куда поставить 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.
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 по умолчанию (без переопределения) не равно нулю.
Блин я в шоке, люди что проходят обучения не вникая в содержимое вообще)и темы плодят с одними и теми же вопросами практически) Ineska тебе памятник за терпение надо поставить))) ежедневно отвечать на кучу одинаковых тем)
Не надо памятник, я еще жить хочу))
Темы не всегда одинаковые, кстати. И в чужих ошибках тоже есть что почерпнуть)
В последнее время вижу одно и тоже, отвечаю уже на более интересные случаи. Подчерпывать только если тем кто новенький на форуме и проэкте и ищет альтернативное решение задачи. Или тем кто конкретно задает вопрос что не понял какое то свойство или тег:)