<title>導覽列範例</title>

  <!-- CSS 樣式放這裡 -->
  <style>
    nav {
      background-color: #fff;
      padding: 10px 20px;
      border-bottom: 1px solid #ccc;
    }

    .nav-container {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
    }
   /* Logo 容器 */
   .logo {
    margin-left: 1cm;
    }

    /* Logo 圖片 */
   .logo a img {
    width: 20%;
    height: auto;
    }


    .nav-menu {
      display: flex;
      justify-content: center;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .nav-menu li {
      margin: 0 15px;
    }

    .nav-login {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .nav-login li {
      margin-left: 20px;
    }

    nav a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }

    /* 下拉選單樣式 */
.nav-menu li {
  position: relative; /* 讓子選單定位依附在父選單項目 */
}

.nav-menu li ul {
  display: none; /* 預設隱藏 */
  position: absolute;
  top: 100%; /* 從父項目下方開始 */
  left: 0;
  background-color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  min-width: 150px;
  z-index: 1000; /* 避免被其他元素蓋住 */
}

.nav-menu li ul li {
  margin: 0;
}

.nav-menu li ul li a {
  display: block;
  padding: 8px 12px;
  color: #333;
  font-weight: normal;
}

.nav-menu li ul li a:hover {
  background-color: #f2f2f2;
}

/* 滑鼠滑過顯示子選單 */
.nav-menu li:hover > ul {
  display: block;
}

  </style>


body{
            margin: 0px;
        }
        
        header{
            width: 100%;
            height: 80vh;
            /*background-color: brown;*/
            background-image: url('images/coffee08.jpg');
            background-size: cover;
            
            display: flex;  /*設定為flexbox*/
            justify-content: center;
            align-items: center;
        }

        h1{
            color: rgb(208, 84, 84);
            font-size: 5rem;
        }

        main{
            margin: 3rem;
        }

        p{
            color: saddlebrown;
        }


        button{
            width: 20vw;
            height: 10vh;
            border-radius: 35px;
            background-color: red;
            color: white;
            font-size: 1.2rem;
            border: #FF99EE 5px solid;
            cursor: pointer;
        }

        button:hover{
            background-color: green;
        }

      
        footer{
            position: fixed;
            bottom: 0px;
            left: 0px;
            background-color: lightgrey;
            color:gray;
            width: 100%;
            text-align: center;
            
        }