Saya telah merancang menu yang terbagi menjadi dua kolom dan mengarahkan kursor ke setiap item daftarnya. Beberapa item daftar memiliki sub menu juga. Sub menu melayang di atas disk induk pada kursor mouse item induk. Tapi sub menu mouse hover tidak berfungsi malah menghilang saat hover. Situs pada dasarnya ada di platform Magento. Jadi saya baru saja menyesuaikan menu css untuk menampilkan ul dalam dua kolom.

Tautan ke situs saya adalah: http://oraora.apponative.com/

Saya sebenarnya tidak tahu bagian kode mana yang membuat masalah. Ini adalah situs berbasis magento dan saya baru saja mengubah Menu.css sedikit dengan mengganti css di bawah ini.

.magemenu-menu.horizontal-menu .menu .inner-cms-block .block.block-cate{
width: 430px;
min-width: 430px;
column-count: 2;
}

.itemsubmenu {
    transform: translateZ(0);
    z-index: 999 !important;

}

Bagian kode di atas saya baru saja membagi menu menjadi 2 kolom dan menampilkan div submenu di atas yang lain dengan mouse.

Diperbarui:

Saya mengikuti saran Gerrit, itu bekerja dengan sempurna. Tapi Sekarang saya menghadapi masalah yang aneh. Item submenu di dekat menu induk terakhir memiliki ruang yang tidak diketahui di antaranya. Di bawah ini adalah tangkapan layar untuk referensi. Saya telah mencoba banyak hal dan tidak ada yang berhasil, sebenarnya saya tidak dapat memahami alasannya. masukkan deskripsi gambar di sini javascript html css magento

1
Saira Nawaz 17 Agustus 2017, 10:32

2 jawaban

Jawaban Terbaik

Silakan tambahkan jumlah kolom: 1; ke submenu item kelas masalahnya akan terpecahkan yaitu

.itemsubmenu {
    transform: translateZ(0);
    z-index: 999 !important;
    column-count: 1;
}
1
Mustafa Saleem 5 Oktober 2017, 12:17

Saya melakukan sedikit "try & error" di halaman Anda dan menemukan bahwa ini berfungsi dengan baik dan lancar saat saya menambahkan column-count: 2; ke item .subcate:

.magemenu-menu.horizontal-menu .menu .inner-cms-block .block.block-cate .subcate {
    position: relative;
    float: left;
    width: 100%;
    padding-left: 25px;
    border-bottom: 1px dotted #d7d7d7;
    column-count: 2; /* I added this */
}

Ini juga bukti gif ;)

enter image description here

3
Gerrit Halfmann 17 Agustus 2017, 08:33