세로 네비게이션 질문합니다!
본문
밑에 코드 작성시에 왼쪽 세로 네비게이션의 상단 부분이 잘려서 나오는데.. 네비의 각 부분의 위치는 그대로 놔두고 잘린 부분만 페이지 가장 위까지 닿게 할수있는 방법 없을까요?
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="new.css">
<style>
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
.main{
margin-top:40px;
text-align:center;
font-size:1.7em;
}
a{
text-decoration:none
}
.wear{
margin-top:2em;
text-align: center;
font-size:30px;
}
.nav1{
text-align: center;
font-family: 'Hepta Slab', serif;
font-weight: 300;
word-spacing: 5em;
color:black;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: absolute;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
<body>
<div class="main">
<h3><a href="brands.html">Brand</a><h3>
</div>
<div class="nav1">
<a href="wear.html" style="text-decoration:none;">Wear</a>
<a href="#" style="text-decoration:none;">Jewelry</a>
<a href="#" style="text-decoration:none;">Watch</a>
</div>
<ul>
<li><a class="active" href="#home">Wear</a></li>
<li><a href="#news">Jewelry</a></li>
<li><a href="#contact">Watch</a></li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
