li를 이용한 가로 메뉴

 

.menu {
    list-style: none; /* 리스트 기호 제거 */
    display: flex; /* 요소들을 수평으로 배열 */
    float:left;
    margin:20px 0 0px 30px ; 
    border:0px solid RED;
      text-align:center;
    }

.menu li {
	margin-right: 20px; /* 메뉴 간격 조정 */
}

.menu li:last-child {
 	margin-right: 0;
}

.menu li a {
    display: block;
    padding: 13px;
    background-color: #eee; /* 배경색 지정 */
    color: #333; /* 글자색 지정 */
    text-decoration: none;
}

.menu li a:hover {
    background-color: #333; /* 마우스 오버시 배경색 지정 */
    color: #fff; /* 마우스 오버시 글자색 지정 */
}

 

<ul class="menu">
  <li><a href="#">사용 설명서</a></li>
  <li><a href="#">카탈로그</a></li>
  <li><a href="#">도면 DWG</a></li>
  <li><a href="#">도면 PDF</a></li>
  <li><a href="#">문의하기</a></li>
  <li><a href="#">구매하기</a></li>
</ul>

 

상세 페이지에  여러 링크를  연결하고 싶을 때

가로 메뉴를 추가하여 적용할 수 있다.

li 는 세로로 배열되는 특성이 있어 가로를 배열하기 위해서는 

display: flex;  라는 클래스가 필요하다.