Promo Member Baru 40%! Program Full Stack Membership! Hanya 3 Hari! Klaim Promo

Menu dropdown berada di kiri atas

Ditanyakan pada tanggal 12 February 2020 oleh Ahmad Fatoni
Tidak Jelas
Post ini tidak jelas apa yang ditanyakan
Buka catatan
Belum menyertakan kode sumber. Kalau screenshot kode tidak cukup.

Cara agar menu dropdown berada di bawah About kaya dimana ya bisa di jelaskan

Comment ..

Mohon sertakan source codenya kak.. silahkan embed dengan menggunakan backtick 3 kali dan tutup backtick 3 kali. Or menggunakan paste bin linknya kirim kesini.

Photo source code susah diotak atik

Dikomentari pada tanggal 12 February 2020 oleh Ahmad Oriza
Comment ..
<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <style type="text/css">
    .container {
        width: 800px;
        margin: 0 auto;
    }
        .header {
            background-color: #eee;
            min-height: 50px;
            text-align: center;
        }
        .logo img {
            width: 200px;
        }
        .menu ul {
            padding: 0;
        }
        .menu ul li{
            position: relative;
            display: inline-block;
        }
        .menu ul li a {
            padding: 10px 10px;
            text-decoration: none;
        }
        ul.submenu {
            background-color: #eee;
            border: 1px solid #ccc;
            top: 20px;
            left: 0;
            display: none;
        }
        ul.submenu li {
            display: block;
        }
        ul.submenu li a {
            display: block;
            padding: 5px 10px;
        }
        .menu ul:hover .submenu {
            display: block;
        }
        .jumbotron {
            font-family: 'Raleway', sans-serif;
            width: 800px;
            padding: 80px 80px;
            box-sizing: border-box;
            text-align: center;
            color: white;
            background-color: #aaa;
            background-image: url(https://images.unsplash.com/photo-1515111293107-b0cd6448f5f6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4f56141064dbe63db663bb7a2c73b71&auto=format&fit=crop&w=1350&q=80);
            background-size: cover;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.4;
        }
        .jumbotron h2,
        .jumbotron p {
            position: relative;
        }
        .content {
            background-color: #ddd;
            min-height: 500px;
            overflow: auto;
        }
        .footer {
            background-color: #ccc;
            min-height: 50px;
            padding: 20px;
            text-align: center;
        }
        .thumbnail {
            background-color: white;
            text-align: center;
            padding: 10px;
            width: 225px;
            margin: 10px;
            float: left;
        }
        .thumbnail img {
            width: 100%;
        }
    </style>
</head>
    <body>
        <div class="container">
        <div class="header">
            <h1>Logo Produk</h1>
            <div class="logo">
                <img src="https://devschool.id/resources/images/sample-logo.png">
            </div>
            <div class="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                        <ul class="submenu">
                            <li><a href="#">CV</a></li>
                            <li><a href="#">Education</a></li>
                            <li><a href="#">Portofolio</a></li>
                        </ul>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
Dikomentari pada tanggal 14 February 2020 oleh Ahmad Fatoni
BUAT KOMENTAR

1 JAWABAN / 2 KOMENTAR

User avatar
Ahmad Oriza menjawab 4 hari yang lalu

Hai kak,

Dia bisa kebawah karena konsep layer position. Mengapa jadi kebawah? karena submenu kita beri position absolute. Nah posisi yang absolute akan bersemayam ke titik orangtua yang relative. Itu sudah teknik bawaan CSS. Disini kan yang relative adalah li. Jadi tiap anaknya akan berada dibawah parent. Tinggal kita atur posisi padding margin sampai pas sesuai dengan yang kita inginkan.

BUAT KOMENTAR