Pertanyaan Buat semua
  • lebar yang sama sebagai yang terluas

  • Saya punya menu ini yang setup inline dan memiliki dropdown.
    Batin ul memiliki latar belakang.
    Setiap dropdown li mempunyai sebuah :hover yang mengubah latar belakang li:

    <div id="navMain">
        <ul>
            <li><a href="#nogo">Forside</a>
                <ul>
                    <li><a href="#nogo">1111111111111</a></li>
                    <li><a href="#nogo">Link 1-2</a></li>
                    <!-- etc. -->
                </ul>
            </li>
            <li><a href="#nogo">Om Os</a>
                <ul>
                    <li><a href="#nogo">Link 2-1</a></li>
                    <li><a href="#nogo">Link 2-2</a></li>
                    <!-- etc. -->
                </ul>
            </li>
            <li><a href="#nogo">Link 3</a>
                <ul>
                    <li><a href="#nogo">Link 3-1</a></li>
                    <li><a href="#nogo">Link 3-2</a></li>
                    <!-- etc. -->
                </ul>
            </li>
        </ul>
    </div>
    

    Masalahnya adalah, itu ketika salah satu submenu li lebih panjang dari yang lain, itu hanya akan memperluas dirinya, dan bukan yang lain li tentu saja.
    Ini menghasilkan :hover efek memiliki panjang yang berbeda.

    Jadi bagaimana saya membuat semuanya li di setiap batin ul ukuran yang sama dengan yang terluas?

    Di sini Anda dapat menemukan CSS jika diperlukan.


    4
    2018-01-11 17:57


    asal


    Jawaban:


    Sini. Perhatikan saya menambahkan kelas ke menu Anda lidan bahwa saya menambahkan latar belakang tubuh ke css Anda, karena saya tidak bisa melihat menu Anda. Akhirnya trik dilakukan dengan membuat elemen li 100% lebar

    <html>
    <head>
    <style>
    body
    {
    background-color:green;
    }
    
    .menu li{
    width:100%
    }
    
    #navMain {
    
    }
    #navMain ul {
        padding:0;
        margin:0;
        z-index: 2;
    }
    #navMain ul li {
        margin-right: 5px;
        text-align:center;
    }
    #navMain li a {
        display: block;
        text-decoration:none;
        color: white;
        padding-left: 10px;
        padding-right:10px;
    }
    #navMain li a:hover{
        background-color: black;
    }
    
    #navMain ul li:last-child {
        margin-right: 0px;
    }
    
    #navMain li {
        position: relative;
        float: left;
        list-style: none;
        margin: 0;
        padding:0;
        font-size: 17px;
        font-weight: bold;
        color:#fff;
    }
    
    #navMain ul ul {
        position: absolute;
        top: 20px;
        visibility: hidden;
        background-image: url(img/alphaBg.png);
    
    }
    #navMain ul li ul li {
        font-size: 12px;
        margin-right: 0px;
        text-align: left;
    
    }
    #navMain ul li ul li:first-child {
        padding-top:5px;
    }
    #navMain ul li:hover ul{
        visibility:visible;
    }
    </style>
    </head>
    <body>
    <div id="navMain">
                <ul>
                    <li><a href="#nogo">Forside</a>
                        <ul class="menu">
                            <li><a href="#nogo">1111111111111</a></li>
                            <li><a href="#nogo">Link 1-2</a></li>
                            <li><a href="#nogo">Link 1-3</a></li>
                            <li><a href="#nogo">Link 1-3</a></li>
                            <li><a href="#nogo">Link 1-3</a></li>
                            <li><a href="#nogo">Link 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#nogo">Om Os</a>
                        <ul  class="menu">
                            <li><a href="#nogo">Link 2-1</a></li>
                            <li><a href="#nogo">Link 2-2</a></li>
                            <li><a href="#nogo">Link 2-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#nogo">Link 3</a>
                        <ul  class="menu">
                            <li><a href="#nogo">Link 3-1</a></li>
                            <li><a href="#nogo">Link 3-2</a></li>
                            <li><a href="#nogo">Link 3-3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    </body>
    </html>
    

    5
    2018-01-11 18:05



    li {display:block} akan membuat daftar item selebar item terluas dalam wadah induk itu


    2
    2018-01-11 18:03



    <!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
            <style>
                body{
                    background:#ededed;
                    margin:0 auto;
                }
                .wrapper{
                    width:720px;
                    border:1px solid red;
                    padding:5px;
                }
                .menu {
                padding:0;
                margin:0;
                width: 100%;
                border-bottom: 0;
                }
                .menu li{
                    display: table-cell;
                    width: 1%;
                    float: none;
                    border:1px solid green;
                    margin:2px;
                    padding:10px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
           <div class="wrapper">
                    <ul class="menu">
                        <li><a href="#">menu 1</a></li>
                        <li><a href="#">menu 2</a></li>
                        <li><a href="#">menu 3</a></li>
                        <li><a href="#">menu 4</a></li>
                        <li><a href="#">menu 5</a></li>
                    </ul>
           </div>
        </body>
    </html>
    

    0
    2018-03-25 08:23