Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Cách tràn menu sâu 3 cấp ul > li > ul > li > ul > li

In lại Tác giả: Vũ trụ không gian 更新时间：2023-11-03 22:39:54 29 4
mua khóa gpt4 Nike

Tôi cần tạo một menu bằng cách sử dụng kết hợp ul > li > ul theo tỷ lệ theo chiều ngang. Mỗi ul phải có chiều cao tối đa và cuộn khi tràn. Khi di chuột qua li, nếu có thẻ ul khác bên trong thì nó sẽ mở ra một menu khác ở bên phải.

Nói cách khác, mỗi menu tiếp theo phải độc lập, có thanh cuộn riêng nếu cần và hiển thị/ẩn nếu có menu khác (phần này lấy từ mã js)

Đối với ví dụ bên dưới, tôi đã bỏ qua cơ chế di chuột, nhưng nền màu đỏ sẽ hiển thị luồng hiển thị menu cấp độ tiếp theo.

Vấn đề: Tôi không thể định vị lớp 3 là tuyệt đối, nó nằm bên dưới lớp 2. Ngoài ra, tôi không thể tràn cấp 2 nên tôi có thể có 2 cuộn cho cấp 2 và cấp 3. Cảm ơn sự giúp đỡ của bạn.

HTML:

ul.l1--menu,
ul.l2--menu,
ul.l3--menu {
	position: relative;
	display: block;
	padding: 0;
	nổi: trái;
	chỉ số z: 1;
	chiều rộng: 100px;
  đường viền: 1px màu đen;
  chiều cao: 100px;
}
.menu {
  position: absolute;
}
li {
	kiểu danh sách: không có;
	display: block;
}
li: di chuột {
  background: red;
}
ul.l1--menu {
	chiều rộng: 300px;
	chỉ số z: 1;
}
ul.l2--menu {
	lề : 0;
	trái: 100px;
	width: 200px;
	z-index: 2;
	position: absolute;
	top: 0;
    chiều cao tối đa: 100px;
    tràn-y: cuộn;
    tràn-x: ẩn;
}
ul.l3--menu {
	lề : 0;
	trái: 100px;
	chiều rộng: 100px;
	chỉ số z: 3;
	position: absolute;
	top: 0;
}

câu trả lời hay nhất

Đây là một giải pháp sử dụng CSS thuần túy.

Tôi đã thay đổi không hiển thị thành độ mờ 0 để có khả năng mờ dần và giữ trạng thái khi chuyển từ cha mẹ sang con cái để thân thiện hơn với người dùng

.menu {
  position: relative;
}

ul {
  width: 200px;
  margin: 0;
  màu sắc: đen;
  kiểu danh sách: không có;
  phần đệm: 0;
  chiều cao tối đa: 100px;
  tràn-x: ẩn;
  tràn-y: tự động;
}

li {
  phần đệm: 0,5em;
}
li:di chuột{
  màu nền: xanh dương;
  màu: trắng;
}
li .menu {
  position: absolute;
  chỉ số z: 10;
  màu nền:xám nhạt;
  độ mờ: 0;
  chuyển tiếp: độ mờ 0,5s;
}
li:di chuột > .menu,
.menu: di chuột {
  độ mờ: 1;
}

li.parent {
  cursor: pointer;
}

.level2 {
  trên cùng: 0px;
  trái: 200px;
}


  

        
  • Liên kết1

    •     
  • Liên kết3...
          

            

                
    • Liên kết31...
                  

                    

                        
      • Liên kết 311

        •                 
      • Liên kết 312

        •                 
      • Liên kết 313

        •                 
      • Liên kết 314

        •               

                  

                

      •           
    • Liên kết 32

      •           
    • Liên kết 33

      •           
    • Liên kết 34

      •         

          

        

    •     
  • Liên kết2

    •     
        
  • Liên kết1

    •     
  • Liên kết2

    •

Về html - cách tràn menu sâu 3 cấp ul > li > ul > li > ul > li, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/44471029/

29 4 0
Bài viết khuyến nghị: c# - Tạo loại cơ sở cho thực thể Entity Framework hiện có (trước tiên là mô hình EF)
Bài viết khuyến nghị: android- Đã xảy ra lỗi trong detectAndCompute()
Bài viết khuyến nghị: Tại sao bối cảnh Entity Framework của tôi không được cập nhật sau khi thêm cột vào cơ sở dữ liệu?
Bài viết khuyến nghị: Gửi thông tin đăng nhập vào nhà cung cấp thông tin xác thực
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress