세로 네비게이션 질문입니다.

세로 네비게이션 질문입니다.

QA

세로 네비게이션 질문입니다.

본문

밑의 코드로 페이지 좌측에 네비게이션을 만들었는데요,
좌측의 네비게이션이 고정이아닌 스크롤따라서 올 수 있도록 할 수 있을까요? 
 
 
 
 
<!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 {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  left: 0px;
  top: 0px;
  background-color: #f1f1f1;
  height: 500%;
  overflow: auto;
 
 
}
 
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
li a.active {
  margin-top: 89px;
  background-color: #c6a39c;
  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="wear">Wear</a></li>
  <li><a href="#news">Jewelry</a></li>
  <li><a href="#contact">Watch</a></li>
  <li><a href="#">About</a></li>
</ul>
 
 
 
 
 
 
<script type="text/javascript">
 
 
 
 
 
 
</script>
</body>
</html>

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 123,125 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT