Drop-down html, php 드롭 다운 구현

index.php 파일의 CSS 스타일 섹션에 이 코드를 추가하거나 기존의 ul 스타일에 list-style-type: none;을 추가하면 드롭다운이 구현. 수정된 코드를 아래와 같음 […]

index.php 파일의 CSS 스타일 섹션에 이 코드를 추가하거나 기존의 ul 스타일에 list-style-type: none;을 추가하면 드롭다운이 구현. 수정된 코드를 아래와 같음

php
코드 복사
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>성공사례 목록</title>
<style>
/* 리스트 아이템 앞의 점 제거 */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}

/* 메뉴 스타일 */
.navbar {
display: flex;
justify-content: space-around;
background-color: #333;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li:hover .submenu {
display: block;
}

/* 표 스타일 */
table {
width: 90%; /* 테이블 너비 */
margin: 20px auto; /* 가운데 정렬 */
border-collapse: collapse; /* 셀 간의 간격 없애기 */
}

table, th, td {
border: 1px solid #ddd; /* 선 색상 및 굵기 조절 */
}

th, td {
padding: 12px; /* 셀 패딩 */
text-align: center; /* 텍스트 정렬 */
font-size: 10pt; /* 글자 크기 조절 */
}

th {
background-color: #

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다