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

html - Cách đặt menu thả xuống phía trước thanh trượt

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 12:26:56 26 4
mua khóa gpt4 Nike

Xin chào, tôi gặp sự cố với menu thả xuống trên trang chỉ mục của mình, phần tử thả xuống bị ẩn bên dưới thanh trượt hình ảnh của tôi, nó nằm ngay bên dưới thanh điều hướng của tôi, tôi muốn có thể xem phần tử menu thả xuống, mọi trợ giúp đều được đánh giá cao Cảm ơn rất nhiều;

Đây là html thanh điều hướng của tôi:

Đây là CSS của tôi:

/*
jmc
*/

body {
    lề: 0px;
    phần đệm: 0px;
    màu: #4d4638;
    họ phông chữ: Tahoma, Geneva, sans-serif;
    cỡ chữ: 13px;
    chiều cao dòng: 1,7em; 
    nền: url(hình ảnh/tooplate_body.jpg);
    màu nền: #c2b8a1;
    lặp lại nền: lặp lại-x;
    vị trí nền: trên cùng    
}

a, a:link, a:visited { color: #000; font-weight: đậm;
a:hover { trang trí văn bản: gạch chân }

.quả cam {
    màu: #FC0;
}

.màu xanh lá {
    màu: #CF6;
}

p { lề: 0 0 10px 0;
img { đường viền: không có }
em { color: #000; font-weight: đậm; font-style: normal }

h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal }
h1 { cỡ chữ: 34px; lề: 0 0 20px 0; phần đệm: 5px 0 }
h2 { cỡ chữ: 28px; lề: 0 0 20px 0; phần đệm: 5px 0;
h3 { cỡ chữ: 24px; lề: 0 0 15px;
h4 { cỡ chữ: 18px; lề: 0 0 15px;
h5 { cỡ chữ: 16px; lề: 0 0 10px;
h6 { cỡ chữ: 14px; lề: 0 0 5px;

.cleaner { rõ ràng: cả hai }
.h10 { chiều cao: 10px }
.h20 { chiều cao: 20px }
.h30 { chiều cao: 30px }
.h40 { chiều cao: 40px }
.h50 { chiều cao: 50px }
.h60 { chiều cao: 60px }

a.more { 
    rõ ràng: cả hai; 
    display: block; 
    chiều rộng: 87px; 
    chiều cao: 31px; 
    phần đệm bên phải: 15px; 
    chiều cao dòng: 30px; 
    text-align: center; 
    màu: #000; 
    độ dày phông chữ: đậm; 
    nền: url(hình ảnh/toolplate_btn.png); 
}

a.more:di chuột { 
    trang trí văn bản: không có; 
    màu: #960; 
}

.float_l { float: trái }
.float_r { float: phải }

.tooplate_margin { lề: 10px }

.image_wrapper { 
    hiển thị: khối nội tuyến; 
    đường viền: 1px liền khối #cac2b1; 
    nền: #b5ac98; 
    phần đệm: 4px; 
    lề dưới: 5px; 
}

.image_fl { 
    nổi: trái; 
    lề: 3px 15px 0 0; 
}

.image_fr { 
    phao: đúng; 
    lề: 3px 0 0 15px; 
}

.tooplate_list { 
    lề: 20px 0 20px 20px; 
    padding: 0; 
    kiểu danh sách: không có; 
}

.tooplate_list li { 
    màu:#000; 
    lề: 0 0 5px 0; 
    phần đệm: 0 0 0 25px; 
    nền: url(hình ảnh/toolplate_list.png) cuộn không lặp lại 0 5px;  
}

.tooplate_list li a { 
    màu: #000; 
    độ dày phông chữ: bình thường; 
}

.tooplate_list li a:hover { 
    trang trí văn bản: gạch chân; 
}

#tooplate_header {
    chiều rộng: 960px;
    phần đệm: 10px 0;
    lề: 0 tự động;
}

#site_title { 
    nổi: trái; 
}

#site_title h1 { 
    lề: 30px 0 0 0; 
    padding: 0; 
}

#site_title h1 a { 
    display: block; 
    chiều rộng: 278px; 
    chiều cao: 50px; 
    color: #fff; 
    thụt lề văn bản: -10000px; 
    nền: url(images/toolplate_logo.png) không lặp lại; 
}

/*thực đơn*/
#tooplate_menu {
    phao: đúng;
    chiều rộng: 632px;
    chiều cao: 48px;
    lề trên: 40px;
    nền: url(hình ảnh/toolplate_menu.png)
}

#tooplate_menu ul {
    chiều rộng: 600px;
    lề: 0 tự động;
    padding: 0;
    kiểu danh sách: không có;
}

#tooplate_menu ul li {
    nổi: trái;
    display: block;
    padding: 0;
    margin: 0;
    hiển thị: nội tuyến;
    text-align: center;
}

#tooplate_menu ul li a {
    display: block;
    chiều rộng: 116px;
    phần đệm: 9px 4px 9px 0;
    margin: 0;
    cỡ chữ: 14px;
    text-align: center;
    trang trí văn bản: không có;
    màu: #000000; 
    bóng văn bản: 1px 1px 1px #cec8ba;
    độ dày phông chữ: bình thường;
    phác thảo: không có;
    border: none;
    nền: url(images/toolplate_menu_divider.png) ở giữa bên phải không lặp lại
}

#tooplate_menu ul li a:hover, #tooplate_menu ul li .current { 
    color: #fff; 
    bóng văn bản: 1px 1px 1px #3d3728;  
}

#tooplate_menu ul .last { 
    lý lịch: không có; 
}

#hộp_tìm kiếm { 
    phao: đúng; 
    lề: 12px 0 0 0; 
    chiều rộng: 170px; 
    chiều cao: 27px; 
    nền: url(images/toolplate_search.png) không lặp lại; 
}

#hộp_tìm kiếm biểu mẫu { 
    rõ ràng: cả hai; 
    chiều rộng: 170px; 
    chiều cao: 26px; 
    padding: 0; 
    margin: 0; 
} 

#trường tìm kiếm { 
    nổi: trái; 
    display: block; 
    chiều cao: 16px; 
    chiều rộng: 130px; 
    phần đệm: 5px; 
    cỡ chữ: 12px; 
    màu sắc: #ccc; 
    chiều cao dòng: 0; 
    lý lịch: không có; 
    border: none; 
} 

#nút tìm kiếm { 
    phao: đúng; 
    display: block; 
    chiều cao: 26px; 
    chiều rộng: 30px; 
    padding: 0; 
    margin: 0; 
    cursor: pointer;
    lý lịch: không có; 
    border: none; 
}

/*cuối thực đơn*/

/* thanh trượt */

#tooplate_middle { 
    rõ ràng: cả hai;
    chiều rộng: 940px;
    chiều cao: 307px;
    phần đệm: 10px 40px;
    lề: 0 tự động;
    nền: url(images/tooplate_middle_home.png) không lặp lại
}

#tooplate_middle_trang con { 
    rõ ràng: cả hai;
    chiều rộng: 820px;
    chiều cao: 207px;
    phần đệm: 60px 100px;
    lề: 0 tự động;
    họ phông chữ: Georgia, "Time New Roman", Times, serif;
    nền: url(images/tooplate_middle_subpage.png) không lặp lại;
}

#tooplate_middle_trang con h2 { 
    cỡ chữ: 48px; 
    màu: #000; 
}

#tooplate_middle_trang con p { 
    font-size: 18px; 
    màu: #000; 
    chiều cao dòng: 30px; 
}

#tooplate_middle_subpage a { 
    màu: #507921; 
    độ dày phông chữ: bình thường; 
}

#thanh trượt {
    phao: đúng;
    chiều rộng: 940px;
    chiều cao: 300px; 
    tràn: ẩn;
}

/*cuối thanh trượt*/

#tooplate_main {
    rõ ràng: cả hai;
    chiều rộng: 960px;
    phần đệm: 30px 0;
    lề: 0 tự động;
}

.col_w960 { chiều rộng: 960px; lề dưới: 40px }
.col_w600 { chiều rộng: 600px }
.col_w450 { chiều rộng: 450px }
.col_w300 { chiều rộng: 300px }
.col_allw300 { chiều rộng: 300px; float: trái; lề phải: 30px }
.col_last { lề: 0 }
.col_w960_last { lề: 0; nền: không có }
.col_last { lề: 0 }

.wwd_box { clear: cả hai; lề trên: 20px; lề dưới: 40px }
.wwd_box img { float: left; lề-phải: 30px }
.wwd_box h3 { cỡ chữ: 16px; lề dưới: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { lề-dưới: 30px }

.lp_box { float: trái; chiều rộng: 300px; lề phải: 30px }
.lp_box h6 { font-weight: đậm; #507921 }
.lp_box_last { lề: 0 }
.lp_box img { đường viền: 1px đặc #CCC phần đệm: 4px }

#cp_contact_form { 
    margin: 10px;
    padding: 0; 
    chiều rộng: 412px; 
}

#cp_contact_form biểu mẫu { 
    lề: 0px; 
    phần đệm: 0px; 
}

#cp_contact_form biểu mẫu .input_field { 
    chiều rộng: 400px; 
    phần đệm: 10px;
    đường viền: 1px liền khối #ccc;  
    nền: #fff;
    màu: #333;  
    Họ phông chữ: Verdana,Geneva,sans-serif;
    cỡ chữ: 12px;
    lề trên: 5px;
}

#cp_contact_form nhãn biểu mẫu { 
    display: block; 
    chiều rộng: 100px; 
    lề phải: 10px; 
    cỡ chữ: 14px; 
}

#cp_contact_form vùng văn bản biểu mẫu { 
    chiều rộng: 400px; 
    chiều cao: 160px; 
    phần đệm: 10px; 
    đường viền: 1px liền khối #ccc;  
    nền: #fff;
    màu: #333;
    Họ phông chữ: Verdana,Geneva,sans-serif;
    cỡ chữ: 12px;
    lề trên: 5px;
}

#cp_contact_form biểu mẫu .submit_btn { 
    lề: 5px 0px;
    phần đệm: 5px 14px; 
    trang trí văn bản: không có; 
    đường viền: 1px liền khối #ccc;  
    nền: #fff;
    cỡ chữ: 14px;  
}

#bản đồ {
    margin: 10px;
}

#bản đồ img { 
    chiều rộng: 300px; 
    chiều cao: 200px; 
    đường viền: 1px liền khối #d9d3c5; 
    nền: #b5ac98; 
    phần đệm: 7px; 
    margin-bottom: 10px; 
}

.news_box { 
    rõ ràng: cả hai; 
    margin-bottom: 30px; 
    phần đệm dưới cùng: 30px; 
    viền dưới: 1px nét đứt #333; 
}

.news_box h2 { 
    cỡ chữ: 20px; 
    lề dưới: 0; 
}

.news_box p.date { 
    màu: #000; 
}

.news_box img { 
    nổi: trái; 
    phần đệm: 4px; 
    đường viền: 1px liền khối #000; 
    lề phải: 30px; 
}

.news_box a.more { 
    rõ ràng: không có; 
    phao: đúng; 
}

.sb_lp_box { 
    rõ ràng: cả hai; 
    lề dưới: 20px; 
}

.sb_lp_box img { 
    đường viền: 1px liền khối #cac2b1; 
    nền: #b5ac98; 
    phần đệm: 8px; 
    margin-bottom: 10px; 
}

.post_box { 
    rõ ràng: cả hai; 
    margin-bottom: 30px; 
}

.post_box h2 { 
    cỡ chữ: 20px; 
    margin-bottom: 10px; 
}

.post_box p.post_meta { 
    lề dưới: 0; 
}

.post_box p span.cat a { 
    màu: #507921; 
    font-weight: 400; 
}

.post_box img { 
    chiều rộng: 550px; 
    chiều cao: 160px; 
    đường viền: 1px liền khối #cac2b1; 
    nền: #b5ac98; 
    phần đệm: 8px; 
    margin-bottom: 10px; 
}

.post_box a.more { 
    nổi: trái; 
}

.lbe_box { 
    rõ ràng: cả hai; 
    lề dưới: 20px; 
}

.lbe_box h3 { 
    cỡ chữ: 16px; 
    lề dưới: 0; 
}

.lbe_box h3 a { 
    màu: #507921; 
    cỡ chữ: 16px; 
    độ dày phông chữ: bình thường; 
}

.lbe_box h3 một nhịp { 
    cỡ chữ: 12px; 
    màu: #507921; 
}

.lbe_box p { 
    lề dưới: 0; 
}

.lbe_box p.date { 
    cỡ chữ: 10px; 
    trọng lượng phông chữ: 700; 
    màu: #507921; 
}

#phòng trưng bày { 
    margin: 0; 
    padding: 0; 
}

#gallery ul { 
    margin: 0; 
    padding: 0;
}

#galleryulli{ 
    display: block; 
    nổi: trái; 
    chiều rộng: 281px; 
    lề: 0 30px 30px 0; 
    phần đệm: 8px; 
    đường viền: 1px liền khối #d0c9b8; 
    nền: #b6ac97; 
}

#gallery ul .thứ ba { 
    lề: 0 0 30px 0; 
}

#gallery ul li a img { 
    đường viền: 1px liền khối #ccc; 
    lề dưới: 5px; 
}

#tooplate_footer_wrapper {
    rõ ràng: cả hai;
    width: 100%;
    lý lịch: #a19882;
    đường viền trên cùng: 10px Solid #d0c8b4;
}

#tooplate_footer {
    chiều rộng: 960px;
    lề: 0 tự động;
    phần đệm: 15px 0;
    text-align: center;
    màu: #000;
    nền: url(image/tooplate_footer.jpg) ở giữa trên cùng không lặp lại
}

#tooplate_cr a { 
    màu: #5fa008; 
    độ dày phông chữ: bình thường;


}

.nav ul {
  kiểu danh sách: không có;
  màu nền: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  cỡ chữ: 1,2em;
  chiều cao dòng: 40px;
  căn chỉnh văn bản: trái;
}

.nav một {
  trang trí văn bản: không có;
  color: #fff;
  display: block;
  phần đệm bên trái: 15px;
  viền dưới: 1px liền khối #888;
  chuyển đổi: màu nền .3s;
}

.nav a:di chuột {
  màu nền: #005f5f;
}

.nav a.active {
  màu nền: #aaa;
  màu sắc: #444;
  con trỏ: mặc định;
}

/*Menu phụ*/
.nav li li {
  cỡ chữ: .8em;
}

/************************************************
   Menu kiểu cho màn hình lớn hơn

   Sử dụng 650px (130px mỗi * 5 mục), nhưng ems
   hoặc các giá trị khác có thể được sử dụng tùy thuộc vào các yếu tố khác
**********************************************/

Màn hình @media và (min-width: 650px) {
  .nav li {
    chiều rộng: 130px;
    viền dưới: không có;
    chiều cao: 50px;
    chiều cao dòng: 50px;
    cỡ chữ: 1,4em;
    hiển thị: khối nội tuyến;
    lề phải: -4px;
  }

  .nav một {
    viền dưới: không có;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    phần đệm bên trái: 0;
  }

  /*Menu phụ*/
  .nav li ul {
    position: absolute;
    display: none;
    chiều rộng: kế thừa;
  }

  .nav li:di chuột ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
    }


    #navul {
    chỉ số z: 9999;
}

Cảm ơn một lần nữa;

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

Từ đoạn mã tôi đã cung cấp, dự đoán tốt nhất của tôi là thêm:

vị trí: tương đối;

Dành cho bạn:

#navul{
    chỉ số z:9999;
}

Nhưng Tôi không thấy div id="nav" trong html của bạn! Nếu bạn không đưa nó vào đoạn mã của mình thì không sao, nhưng nếu đó cũng là một lỗi và bạn định gán css đó cho một lớp div ="nav ", sau đó thử thay đổi toàn bộ khối thành:

.nav ul{
    vị trí: tương đối;
    chỉ số z:9999;
}

Một điều cuối cùng cần nhớ là việc gán chỉ mục z cho một phần tử cũng có tập hợp vị trí (tương đối hoặc tuyệt đối, v.v.) - theo như tôi biết, chỉ mục z không hoạt động trừ khi khối có thuộc tính vị trí được đặt với nó là tốt.

Hy vọng điều này hữu ích cho bạn.

Về html - cách đặt menu thả xuống trước thanh trượt, 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/27952770/

26 4 0
Bài viết khuyến nghị: css - Wordpress: Mục blog đầu tiên biến mất (chỉ trong Firefox!)
Bài viết khuyến nghị: Ngoại lệ trình kết nối mySql khi chèn hàng vào bảng không trống (thư viện C++ cho mysql)
Bài viết khuyến nghị: Cách cập nhật liên tục một giá trị trong MySQL bằng Connector/C++
Bài viết khuyến nghị: Cách hiển thị hình ảnh từ máy chủ với tiêu đề và mô tả trong bộ điều hợp danh sách tùy chỉnh trong android
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