-
질문 & 답변
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
미해결
메뉴에 padding-top을 주면 계단식으로 변합니다.
22.03.16 12:11 작성 조회수 154
1
.menu 부분에 padding-top 값을 부여하면 계단식으로 변하는데 어떤 부분이 잘못 되었을까요?
도움 주시면 감사하겠습니다
@charset 'utf-8';
body {
margin: 0;
background-color: #fff;
color: #222328;
font-size: 15px;
}
a {
color: #222328;
text-decoration: none;
}
.container {}
.header-inner {
border: 1px solid red;
}
header {
height: 100px;
width: 1200px;
margin: auto;
position: relative;
z-index: 10;
}
header > div {
height: 100px;
}
.header-logo {
line-height: 130px;
width: 200px;
float: left;
}
.navi {
width: 600px;
float: right;
margin-right: 20px;
}
.content-inner {}
.slide {
width: 1200px;
margin: auto;
margin-bottom: 20px;
}
.slide > div {
border: 1px solid blue;
height: 300px;
}
.items {
width: 1200px;
margin: auto;
overflow: hidden;
}
.items > div {
height: 200px;
float: left;
box-sizing: border-box;
}
.news {
width: 425px;
}
.gallery {
width: 425px;
}
.banner {
width: 350px;
}
.banner img {
width: 95%;
}
.footer-inner {
border: 1px solid green;
}
footer{
width: 1200px;
margin: auto;
overflow: hidden;
}
footer > div {
border: 1px solid yellow;
height: 100px;
float: left;
box-sizing: border-box;
}
.copyright {
width: 1000px;
}
.copyright div {
border: 1px solid #000;
height: 50px;
}
.family-site{
width: 200px;
}
/* Slide */
.slide {
position: relative;
height: 300px;
width: 1200px;
overflow: hidden;
}
.slide > div {
width: 100%;
width: 3600px;
font-size: 0;
position: absolute;
top: 0;
left: 0;
animation: slide 10s linear infinite;
}
@keyframes slide {
0% {
left: 0;
}
30% {
left: 0;
}
35% {
left: -1200px;
}
65% {
left: -1200px;
}
70% {
left: -2400px;
}
95% {
left: -2400px;
}
100% {
left: 0;
}
}
/* News & Gallery */
.tab-inner {
width: 95%;
margin: auto;
}
.btn {}
.btn span {
border: 1px solid black;
display: inline-block;
width: 100px;
text-align: center;
padding: 5px;
border-radius: 5px 5px 0 0;
border-bottom: none;
margin-bottom: -1px;
background-color: #fff;
}
.tab1,
.tab2 {
border: 1px solid black;
padding: 0 15px;
height: 150px;
}
.tab1 a {
display: block;
padding: 5px;
border-bottom: 1px solid black;
}
.tab1 a:last-child {
border-bottom: none;
}
.tab1 a b {
float: right;
font-weight: normal;
}
.tab2 {
text-align: center;
}
.tab2 img {
width: 120px;
padding-top: 25px;
}
/* Navigation */
.menu {
list-style: none;
padding: 0;
padding-top: 55px;
}
.menu li {
float: left;
box-sizing: border-box;
width: 25%;
text-align: center;
}
.menu li > a {
border: 1px solid #000;
display: block;
padding: 5px;
}
.sub-menu {
border: 1px solid black;
background-color: #fff;
}
.sub-menu a {
display: block;
padding: 5px;
color: #fff;
}
.sub-back {
width: 1200px;
height: 140px;
background-color: #000;
position: absolute;
left: 0;
top: 100%;
z-index: -1;
}
답변을 작성해보세요.
0
답변 1