Nikita
07.Январь.2017 02:29:41
1
Испытание: многоуровневое меню
CSS code:
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 ;
}
.main-menu {
padding:0px;
margin:0px;
width:190px;
list-style:none;
}
.main-menu>li {
background:#2980b9 ;
color:#ffffff ;
}
.main-menu >li> a {
border-bottom:2px solid #2c3e50 ;
}
.main-menu a {
color:#ffffff ;
text-decoration:none;
display:table;
padding:10px 15px;
width:160px;
}
.main-menu>.active>a {
background:#1abc9c ;
}
.main-menu ul {
padding:0px;
margin:0px;
list-style:none;
text-decoration:underline;
background:#ffffff ;
border-bottom:2px solid #2c3e50 ;
}
.main-menu ul a {
color:#2980b9 ;
}
Ineska
07.Январь.2017 08:21:44
2
Для ссылок в подменю задавайте другие отступы, по 5px сверху и снизу. А для списка подменю по 10px сверху и снизу.
Nikita
07.Январь.2017 21:28:03
3
Спасибо, однако я добавил и всё ещё не добираются проценты.
Ineska
08.Январь.2017 10:21:40
4
Последний вариант кода текстом, пожалуйста.
Nikita
08.Январь.2017 17:47:44
5
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 ;
}
.main-menu {
padding:0px;
margin:0px;
width:190px;
list-style:none;
}
.main-menu>li {
background:#2980b9 ;
color:#ffffff ;
}
.main-menu >li> a {
border-bottom:3px solid #2c3e50 ;
}
.main-menu a {
color:#ffffff ;
text-decoration:none;
display:table;
padding:10px 15px;
width:160px;
}
.main-menu>.active>a {
background:#1abc9c ;
}
.main-menu ul {
padding:0px;
margin:0px;
list-style:none;
text-decoration:underline;
background:#ffffff ;
border-bottom:3px solid #2c3e50 ;
padding-top:5px;
padding-bottom:5px;
}
.main-menu ul a {
color:#2980b9 ;
padding-top:5px;
padding-bottom:5px;
}
Ineska
08.Январь.2017 17:55:14
6
Вкладка “Различия” о многом вам бы подсказала, например, о том, что рамка 3px - это многовато, или что ширина ссылок не соответствует образцу, или о том, что в подменю ссылки подчеркнуты. Смотрите внимательно и сравнивайте.