Вопрос от новичка

rustamXx · December 24, 2020

Подскажите как мне сделать подменю как на нижнем скрине( мой вариант верхний) там расстояния между строками меньше чем на моём

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: многоуровневое меню</title>
</head>
<body>
<ul class="main-menu">
<li class="active">
<a href="/courses">Курсы</a>
<ul>
<li><a href="/courses/4">Знакомство</a></li>
<li><a href="/courses/42">Селекторы</a></li>
<li><a href="/courses/45">Позиционирование</a></li>
</ul>
</li>
<li><a href="/demos">Демонстрации</a></li>
<li><a href="/public_profiles">Участники</a></li>
<li><a href="/achievments">Достижения</a></li>
</ul>
</body>
</html>

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

body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
ul{
margin: 0;
padding: 0;
}
.active > a{
background-color: #1ABC9C;
text-decoration: none;
padding-left: 15px;
line-height: 40px;
color: #FFFFFF;
border-bottom: 2px solid #2C3E50;

}
.main-menu li li {
padding-left: 15px;
line-height: 40px;
background-color: #FFFFFF;
width: 190px;

}
.main-menu > li {
background-color: #2980B9;
width: 200px;
line-height: 40px;
border-bottom: 2px solid #2C3E50;
}
.main-menu > li > a{
color: #FFFFFF;
padding-left: 15px
}
.main-menu li li a{
color: #2980B9
}
.main-menu a{
display: block;
height: 40px;
width: 190px;

}

.main-menu > li > a{
text-decoration: none;

}

AlexZaw · December 25, 2020

24.12.2020 в 20:20, rustamXx сказал:

Подскажите как мне сделать

Уберите или уменьшите line-height у li и уменьшите высоту у ссылок.

rustamXx · December 26, 2020

9 часов назад, AlexZaw сказал:

Уберите или уменьшите line-height у li и уменьшите высоту у ссылок.

делал так, к сожалению не помогает

AlexZaw · December 28, 2020

26.12.2020 в 07:46, rustamXx сказал:

делал так, к сожалению не помогает

Значит либо вы что-то не так сделали, либо проблема где-то в другом месте. Описанный мной способ прекрасно работает для приведенного куска кода.

.main-menu li li {
  padding-left: 15px;
  /*     line-height: 40px; */
  background-color: #ffffff;
  width: 190px;
  padding-top: 15px; /*новое*/
}

.main-menu li li:last-child {
  padding-bottom: 15px; /*новое*/
}

.main-menu > li {
  background-color: #2980b9;
  width: 200px;
  /*     line-height: 40px; */
  border-bottom: 2px solid #2c3e50;
}
.main-menu a {
  display: block;
  /*     height: 40px; */
  width: 190px;
}

Sign In

Вопрос от новичка

Recommended Posts

rustamXx

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

rustamXx

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information