Postingan lainnya

Buku Ini Koding!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

Kelas Premium!
Belajar bikin website dari nol sekarang

Gunakan kupon "lebihcepat" untuk diskon 25%!

bantuan menu responsive

<a href=' [url=https://ibb.co/bG2SdF][/url] '> [url=https://ibb.co/bG2SdF][/url] </a> gan mohon bantuannya gimana yah cara nya supaya menu nya itu gk terbalik saat pakai float:right ? mohon di jawab gan! dan ada scriptnya di bawah.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>branda</title>
    <meta name="viewport" content="width=device-width, initial scale=1">
    <style>
        *{
            padding:0;
            margin:0;
        }
        .bg{
            width: 100%;
            height: 390px;

        }
        .navbar .navbar1{
            background: #89610a;
            width: auto;
            height: 44px;
            padding-top: 5px;
            position: relative;
            top:-5px;
        }
        .navbar1 ul li{
            position: relative;
            top:-5px;
        }
        .navbar .navbar1 p.header{
            display: inline-block;
            float: left;
            position: relative;
            top:-5px;
            padding: 15px;
            margin-right: 20px;
            font-weight: bold;
            color: #1c1c0c;
        }
        .navbar > .navbar1 > ul > li {
            display: inline-block;
            list-style: none;
            float:right;
            left:0px;
            padding: 14px;
            padding-left: 10px;
            line-height: 20px;
            text-align: center;
            box-sizing: border-box;
            position: relative;
            z-index: 90;
        }
        .navbar .navbar1 ul li a{
            text-decoration: none;
            color: black;
            font-size: 1em;
        }
        .navbar .navbar1 ul li:hover{
            background: rgba( 247, 64, 64, 0.745 );
            font-weight: bold;
        }
        .navbar .navbar1 ul .header{
            padding: 10px;
            border:1px solid black;
            line-height: 20px;
            display: inline-block;
            float: left;
        }
        .navbar > .navbar1 > ul > li:hover > a{
            color: white;
            font-weight: bold;
            border-bottom: 2px solid #0743c4 ;
        }
        .navbar .navbar1 ul li ul{
            display: none;
        }
        .navbar .navbar1 ul li:hover ul{
            display: block;
        }
        .navbar .navbar ul li ul{
            width: 103%;
            height: auto;
            border-bottom-left-radius: 7px;
            border-bottom-right-radius: 7px;
        }
        .navbar .navbar1 ul li ul li{
            position: relative;
            left:-12px;
            top:12px;
            padding: 10px;
            width: 107%;
            display:block;
            clear: both;
            background: #c76b31;
            border-bottom: 1px solid #957878;
        }
        .navbar .navbar1 ul li ul li:hover{
            background:#db2d2d;
        }
        .navbar .navbar1 ul li ul li:hover a{
            color: #fbd4d4;
            border-bottom: 2px solid #f2d8d8;
        }
        label{
            float: right;
            font-size: 18px;
            line-height:45px;
            display: none;
            width: 45px;
            height: 45px;
            padding-left: 5px;
            margin-right: 1px;
            border: 2px solid white;
            position: relative;
            top:-5px;
            color: white;
        }
        #toggle{
            display: none;
        }
        @media screen and (max-width:770px){
            label{
                display: block;
                cursor:pointer;
            }
            .navbar .navbar1 ul{
                display: none;
            }
            .navbar > .navbar1 > ul > li{
                background:#d44343;
                width: 100%;
                display: block;
                border-bottom: 1px solid #987f7f;
            }
            .navbar .navbar1 ul li ul li{
                background: #f4802e;
                width: 101%;
            }
            #toggle:checked + ul{
                display: block;
            }
            .navbar .navbar1 p.header{
                height: 17px;
                color: whitesmoke;

            }

        }
        .paragraf{
            clear: both;
        }
    </style>
</head>
<body>
    <nav class="navbar">
    <div class="gambar">
        <img src="media/pexels-photo-262272.jpeg" class="bg">
    </div>
        <div class="navbar1">
            <p class="header">Alone.com</p>
            <label for="toggle">Menu</label>
            <input type="checkbox" id="toggle"/>
            <ul class="navbarisi">

                <li><a href="#">Home</a></li>
                <li><a href="#">Category</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Javascript</a></li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">Ruby</a></li>
                    </ul>
                </li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Perpus</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </nav>
<div class="paragraf">
    <P>HALLO SEMUANYA</P>
</div>
</body>
</html>

css

@hafizdjubaidir

110 Kontribusi 1 Poin

Diperbarui 8 tahun yang lalu

2 Jawaban:

Jawaban Terpilih

mending ul nya aja gan yg di kanan-in


.navbar > .navbar1 > ul {
 float:right;
}

@jabbarbie

34 Kontribusi 28 Poin

Dipost 8 tahun yang lalu

[[/url]
[url=https://id.imgbb.com/]upload image[/url]
'>[url=https://ibb.co/nF8yna][/url]
[url=https://id.imgbb.com/]upload image[/url]]([url=https://ibb.co/nF8yna]<img src=) malah kayak gini gan