Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Sửa giúp mình cái Dropdown Menu Web này với.

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi virut.exe, 21/5/13.

Lượt xem: 2,213

  1. virut.exe Thành viên cấp 1

    Mình newbie nên khi làm hay nhìn theo video và tài liệu, có cái dropdown này mà bị lỗi mãi, các bạn xem giúp với. Ở chỗ phần Viện và trung tâm còn Dropdown Menu con nữa nhưng mình chưa làm được nên để tạm trong thẻ chú thích nha <!-- -->, xin các bạn xem fix giúp với.
    Code file html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="filecss.css"/><!--chi den file css-->
</head>
<body>
        <center>
        <div id="main_navigation">
        <ul><!--the UnOrder List danh sach khong theo thu tu-->
        <li><a href="#">GIỚI THIỆU CHUNG</a><!--danh sach-->
            <ul>
                <li><a href="#">Lịch sử hình thành</a></li>
                <li><a href="#">Cơ cấu tổ chức</a></li>
                <li><a href="#">Đội ngũ Y - Bác sĩ</a></li>
                <li><a href="#">Cơ sở vật chất</a></li>
                <li><a href="#">Quy trình khám chữa bệnh</a></li>
                <li><a href="#">Văn bản & Quy định</a></li>
            </ul>     
        </li>
 
        <li><a href="#">PHÒNG BAN - TRUNG TÂM</a><!--danh sach-->
            <ul>
                <li><a href="#">Phòng tổ chức cán bộ</a></li>
                <li><a href="#">Phòng Y tá - Điều dưỡng</a></li>
                <li><a href="#">Phòng Kế hoạch - Tài chính</a></li>
                <li><a href="#">Phòng Công đoàn - Đảng bộ</a></li>
                <li><a href="#">Phòng Vật tư - Thiết bị</a></li>
                <li><a href="#">Phong Quản lý - Phát triển</a></li>
                <li><a href="#">Viện & Trung tâm</a></li>
                    <!--<ul>
                        <li><a href="#">Trung tâm đào tạo bồi dưỡng cán bộ</a></li>
                        <li><a href="#">Trung tâm NCKH & HTQT</a></li>
                        <li><a href="#">Trung tâm bảo trợ xã hội/a></li>
                    </ul>-->
            </ul>     
        </li>
        <li><a href="#">CHUYÊN KHOA</a>
            <ul>
                <li><a href="#">Khoa Khám bệnh</a></li>
                <li><a href="#">Khoa Gây mê - Hồi Sức - Cấp cứu</a></li>
                <li><a href="#">Khoa Nhi</a></li>
                <li><a href="#">Khoa Phụ sản</a></li>
                <li><a href="#">Khoa Tai - Mũi - Họng</a></li>
                <li><a href="#">Khoa Tim mạch - Thần kinh</a></li>
                <li><a href="#">Khoa Răng Hàm Mặt</a></li>
                <li><a href="#">Khoa Dược - Thuốc</a></li>
                <li><a href="#">Khoa Phẫu thuật - Nội soi</a></li>
                <li><a href="#">Khoa Chấn thương - Chỉnh hình</a></li>
                <li><a href="#">Khoa Mắt</a></li>
                <li><a href="#">Khoa Xét nghiệm - Truyền máu</a></li>
                <li><a href="#">Khoa Dinh dưỡng - Tiêu hóa</a></li>
                <li><a href="#">Khoa Gan - Thận - Tiết niệu</a></li>
                <li><a href="#">Khoa Da liễu</a></li>
                <li><a href="#">Khoa Y học cổ truyền</a></li>
            </ul>
        </li>
 
        <li><a href="#">TIN TỨC & SỰ KIỆN</a>
            <ul>
                <li><a href="#">Thông tin Y học</a></li>
                <li><a href="#">Thông tin đấu thầu</a></li>
                <li><a href="#">Thông tin tuyên truyền</a></li>
                <li><a href="#">Hoạt động đoàn hội</a></li>
            </ul>
        </li>
       
        <li><a href="#">DỊCH VỤ</a>
            <ul>
                <li><a href="#">Dịch vụ nội trú</a></li>
                <li><a href="#">Dịch vụ ngoại trú</a></li>
                <li><a href="#">Dịch vụ tư vấn hỗ trợ sức khỏe</a></li>
                <li><a href="#">Dịch vụ bảo hiểm Y tế</a></li>
                <li><a href="#">Giá dịch vụ khám - điều trị</a></li>
                <li><a href="#">Tra cứu thuốc</a></li>
            </ul>
        </li>
       
        <li><a href="#">ĐÀO TẠO & NGHIÊN CỨU KHOA HỌC</a>
            <ul>
                <li><a href="#">Đào tạo & Hợp tác</a></li>
                <li><a href="#">Nghiên cứu Khoa học</a></li>
            </ul>
        </li>
 
        <li><a href="#">LIÊN HỆ & TUYỂN DỤNG</a>
            <ul>
                <li><a href="#">Liên hệ</a></li>
                <li><a href="#">Tuyển dụng</a></li>
            </ul>
        </li>
        </ul><!--KET THUC MAIN-->
        </div>
</body>
</html>
    Code file css
    Code:
    @charset "utf-8";
/* CSS Document */
    /*main navigation*/
*{margin:0; padding:0}
 
#main_navigation
{
    border:1px solid #F33;
    float:left;
    background:#0CF;
}
 
#main_navigation ul
{
    float:left;
    list-style:none;
}
 
#main_navigation ul li
{
    float:left;
    position:relative;
}
 
#main_navigation li a
{
    display:block;
    padding:0.3em 5px;
    text-decoration:none;
    color:#F00;
    font-weight:bold;
}
 
#main_navigation li a:hover
{
    color:#FFF;
    background:#FC3;
}
 
#main_navigation li ul
{
    position:absolute;
    display:none;
    width:15em;
}
 
#main_navigation li:hover ul
{
    display:block;
}
 
#main_navigationul ul li ul li
{
    border:1px solid #F93;*/
    width:100%;
}
    Hình mô phỏng Dropdown Menu của mình và Dropdown Menu mình muốn:
    [​IMG]
    [​IMG]

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    virut.exe, 21/5/13
    #1
  2. Tiến Nava

    Tiến Nava Thành viên cấp 2

    Code:
    #main_navigation li ul
{
    position:absolute;
    display:none;
    width:15em;
    background:yellow;// Mình thêm dòng này
}
    Tiến Nava, 21/5/13
    #2
  3. Shinigamj

    Shinigamj Thành viên cấp 1

    Đây tham khảo hơ :

    HTML:
    <div id="main_navigation">
<ul><!--the UnOrder List danh sach khong theo thu tu-->
    <li><a href="#">GIỚI THIỆU CHUNG</a><!--danh sach-->
        <ul>
        <li><a href="#">Lịch sử hình thành</a></li>
        <li><a href="#">Cơ cấu tổ chức</a></li>
        <li><a href="#">Đội ngũ Y - Bác sĩ</a></li>
        <li><a href="#">Cơ sở vật chất</a></li>
        <li><a href="#">Quy trình khám chữa bệnh</a></li>
        <li><a href="#">Văn bản & Quy định</a></li>
        </ul>
    </li>
    <li><a href="#">PHÒNG BAN - TRUNG TÂM</a><!--danh sach-->
        <ul>
            <li><a href="#">Phòng tổ chức cán bộ</a></li>
            <li><a href="#">Phòng Y tá - Điều dưỡng</a></li>
            <li><a href="#">Phòng Kế hoạch - Tài chính</a></li>
            <li><a href="#">Phòng Công đoàn - Đảng bộ</a></li>
            <li><a href="#">Phòng Vật tư - Thiết bị</a></li>
            <li><a href="#">Phong Quản lý - Phát triển</a></li>
            <li><a href="#">Viện & Trung tâm</a>
                <ul>
                    <li><a href="#">Trung tâm đào tạo bồi dưỡng cán bộ</a></li>
                    <li><a href="#">Trung tâm NCKH & HTQT</a></li>
                    <li><a href="#">Trung tâm bảo trợ xã hội</a></li>
                </ul>
            </li>
        </ul>
    </li>
<li><a href="#">CHUYÊN KHOA</a>
    <ul>
        <li><a href="#">Khoa Khám bệnh</a></li>
        <li><a href="#">Khoa Gây mê - Hồi Sức - Cấp cứu</a></li>
        <li><a href="#">Khoa Nhi</a></li>
        <li><a href="#">Khoa Phụ sản</a></li>
        <li><a href="#">Khoa Tai - Mũi - Họng</a></li>
        <li><a href="#">Khoa Tim mạch - Thần kinh</a></li>
        <li><a href="#">Khoa Răng Hàm Mặt</a></li>
        <li><a href="#">Khoa Dược - Thuốc</a></li>
        <li><a href="#">Khoa Phẫu thuật - Nội soi</a></li>
        <li><a href="#">Khoa Chấn thương - Chỉnh hình</a></li>
        <li><a href="#">Khoa Mắt</a></li>
        <li><a href="#">Khoa Xét nghiệm - Truyền máu</a></li>
        <li><a href="#">Khoa Dinh dưỡng - Tiêu hóa</a></li>
        <li><a href="#">Khoa Gan - Thận - Tiết niệu</a></li>
        <li><a href="#">Khoa Da liễu</a></li>
        <li><a href="#">Khoa Y học cổ truyền</a></li>
    </ul>
</li>
</ul><!--KET THUC MAIN--> </div>
    HTML:
    @charset "utf-8"; /* CSS Document */ /*main navigation*/ *{margin:0; padding:0}
#main_navigation { border:1px solid #F33; float:left; background:#0CF; }
  #main_navigation ul { float:left; list-style:none; }
  #main_navigation ul li { float:left; position:relative; }
    #main_navigation li a { display:block; padding:0.3em 5px; text-decoration:none; color:#F00; font-weight:bold;text-align:left; }
    #main_navigation li a:hover { color:#FFF; background:#FC3; }
    #main_navigation ul li > ul { position:absolute; display:none; width:15em; }
      #main_navigation ul li:hover > ul { display:block;}
      #main_navigation ul li ul li { width:100%;position:relative;}
      #main_navigation ul li > ul > li > ul{ position:absolute; display:none; width:15em;top:0px;left:240px; }
      #main_navigation ul li > ul > li:hover > ul { display:block;}
      #main_navigation ul li ul li ul li{ width:100%; }
    Shinigamj, 21/5/13
    #3
  4. virut.exe

    virut.exe Thành viên cấp 1

    Hic bạn Tiến NAVA bày đúng rồi, nhưng nó vẫn chưa có cái vạch phân tách các phần.
    Hình
    [​IMG]
    Bạn Shinigami bày có vẻ tốt hơn nhưng mà nó ko có thụt vào để thừa đoạn màu vàng thì tốt quá. nhưng dù sao cũng khá ổn, cám ơn 2 bạn nhé.
    [​IMG]
    À quên 1 vấn đề nữa là khi re tới phần viện và trung tâm của phần phòng ban ta lại có dropdown tiếp cái này phải làm sao mấy bạn, do mình làm dk nên để trong thẻ <!-- --> thôi, trong file html á, đây này:
    Code:
                    <li><a href="#">Viện & Trung tâm</a>
                    <!--<ul>
                        <li><a href="#">Trung tâm đào tạo bồi dưỡng cán bộ</a></li>
                        <li><a href="#">Trung tâm NCKH & HTQT</a></li>
                        <li><a href="#">Trung tâm bảo trợ xã hội/a></li>
                    </ul>-->
    virut.exe, 22/5/13
    #4
  5. Shinigamj

    Shinigamj Thành viên cấp 1

    Trong code của mình có làm phần đó rồi đấy virut.exe
    Shinigamj, 23/5/13
    #5
  6. virut.exe

    virut.exe Thành viên cấp 1

    Hic bạn Tiến Nava vs bạn Shinigamj xem fix giúp mình lại cái, mình đã quăng dropdown menu vào khuôn khổ trang web thế là nó lệnh tùm lum lên hết chỉnh đủ mọi kiểu nhưng chưa dk, chắc chỉnh ko đúng chỗ, tình tình là mình muốn nói giống cái này :
    [​IMG]Các link được border hết và cái chữ như Forum ở trên nó cũng nằm trên 1 block màu cam luôn.
    Còn đây bài mình nó cứ thừa ra nhưng chỗ mình đánh dấu màu đen, còn phần giới thiệu chung nó ko nằm trong 1 block full hết mà chỉ nằm trong 1 vùng cam bôi trọn vẹn cái chữ đó thôi, hình nè:
    [​IMG]Hic, còn đây mình có cái dropdown 1 hàng mà sao phần chữ nó lại chạy tụt ra ngoài thế ko biết, các bạn xem fix giúp với.
    Hình:
    [​IMG]Code file HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="menucss.css" />
</head>
 
<body>
<div id="wrapper">
<div id="header">
    <div id="banner"></div><!--de logo-->
   
    <div id="main_navigation">
        <ul>
            <li><a href="#">GIỚI THIỆU CHUNG</a><!--danh sach-->
                <ul>
                    <li><a href="#">Lịch sử hình thành</a></li>
                    <li><a href="#">Cơ cấu tổ chức</a></li>
                    <li><a href="#">Đội ngũ Y - Bác sĩ</a></li>
                    <li><a href="#">Cơ sở vật chất</a></li>
                      <li><a href="#">Quy trình khám chữa bệnh</a></li>
                    <li><a href="#">Văn bản & Quy định</a></li>
                </ul>   
            </li>
            <li><a href="#">PHÒNG BAN & TRUNG TÂM</a><!--danh sach-->
                <ul>
                    <li><a href="#">Phòng tổ chức cán bộ</a></li>
                    <li><a href="#">Phòng Y tá - Điều dưỡng</a></li>
                    <li><a href="#">Phòng Kế hoạch - Tài chính</a></li>
                    <li><a href="#">Phòng Công đoàn - Đảng bộ</a></li>
                    <li><a href="#">Phòng Vật tư - Thiết bị</a></li>
                    <li><a href="#">Phong Quản lý - Phát triển</a></li>
                    <li><a href="#">Viện & Trung tâm</a>
                        <ul>
                            <li><a href="#">Trung tâm Đào tạo Bồi dưỡng CB</a></li>
                              <li><a href="#">Trung tâm NCKH & HTQT</a></li>
                            <li><a href="#">Trung tâm bảo trợ xã hội</a></li>
                        </ul>
                      </li>
                </ul>   
            </li>
            <li><a href="#">CHUYÊN KHOA</a>
                <ul>
                    <li><a href="#">Khoa Khám bệnh</a></li>
                    <li><a href="#">Khoa Gây mê - Hồi Sức - Cấp cứu</a></li>
                    <li><a href="#">Khoa Nhi</a></li>
                    <li><a href="#">Khoa Phụ sản</a></li>
                    <li><a href="#">Khoa Tai - Mũi - Họng</a></li>
                    <li><a href="#">Khoa Tim mạch - Thần kinh</a></li>
                    <li><a href="#">Khoa Răng Hàm Mặt</a></li>
                    <li><a href="#">Khoa Dược - Thuốc</a></li>
                      <li><a href="#">Khoa Phẫu thuật - Nội soi</a></li>
                    <li><a href="#">Khoa Chấn thương - Chỉnh hình</a></li>
                    <li><a href="#">Khoa Mắt</a></li>
                      <li><a href="#">Khoa Xét nghiệm - Truyền máu</a></li>
                    <li><a href="#">Khoa Dinh dưỡng - Tiêu hóa</a></li>
                    <li><a href="#">Khoa Gan - Thận - Tiết niệu</a></li>
                    <li><a href="#">Khoa Da liễu</a></li>
                    <li><a href="#">Khoa Y học cổ truyền</a></li>
                </ul>
            </li>
            <li><a href="#">TIN TỨC & SỰ KIỆN</a>
                <ul>
                    <li><a href="#">Thông tin Y học</a></li>
                    <li><a href="#">Thông tin đấu thầu</a></li>
                    <li><a href="#">Thông tin tuyên truyền</a></li>
                    <li><a href="#">Hoạt động đoàn hội</a></li>
                </ul>
            </li>
            <li><a href="#">DỊCH VỤ</a>
                <ul>
                    <li><a href="#">Dịch vụ nội trú</a></li>
                    <li><a href="#">Dịch vụ ngoại trú</a></li>
                    <li><a href="#">Dịch vụ tư vấn hỗ trợ sức khỏe</a></li>
                    <li><a href="#">Dịch vụ bảo hiểm Y tế</a></li>
                    <li><a href="#">Giá dịch vụ khám - điều trị</a></li>
                    <li><a href="#">Tra cứu thuốc</a></li>
                </ul>
            </li>
            <li><a href="#">ĐÀO TẠO & NCKH</a>
                <ul>
                    <li><a href="#">Đào tạo & Hợp tác</a></li>
                    <li><a href="#">Nghiên cứu Khoa học</a></li>
                </ul>
            </li>
            <li><a href="#">LIÊN HỆ & TUYỂN DỤNG</a>
                <ul>
                    <li><a href="#">Liên hệ</a></li>
                    <li><a href="#">Tuyển dụng</a></li>
                </ul>
            </li>
        </ul><!--KET THUC MAIN-->
    </div>
   
    <div class="slider"></div><!--phan slider-->
</div>
 
<div id="content_nav">
    <ul>
        <li><a href="#" id="timbs" name="timbsi" title="Tìm bác sĩ"></a>Tim bác sĩ</li>
        <li><a href="#" id="dathen" name="dathen" title="Đặt hẹn khám bệnh"></a>Đặt hẹn khám bệnh</li>
        <li><a href="#" id="yeucau" name="yeucau" title="Tìm bác sĩ"></a>Yêu cầu</li>
        <li><a href="#" id="chedo" name="chedo" title="Chế độ chính sách BHYT"></a>Chế độ chính sách BHYT</li>
        <li><a href="#" id="quytrinh" name="quytrinh" title="Quy trình khám chữa bệnh"></a>Quy trình Khám chữa bệnh</li>
    </ul>
</div>
 
<div id="body">
 
    <div id="body_right">body_right</div>
    <div id="body_main"></div>
    <div class="clear"></div>
</div>
 
<div id="footer"></div>
</div>
</body>
</html>
    Code file CSS:
    Code:
    @charset "utf-8";
 
/* CSS Document */
* {margin:0; padding:0;}
 
body {text-align:center; background:#495051; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:15px; color:#383838;}
 
#wrapper {margin: 10px auto 10px auto; padding:0; width:1000px; background:#FFC;/*margin:0 auto;background:#FFFFFF; overflow:hidden;*/}
 
#header {height:550px; background:#0C6; margin: 10px 20px 0px 20px;}
 
#content_nav { height:40px; background:#06F; margin:5px 20px 0px 20px; border:1px solid:#F03;}
#content_nav ul { float:left; list-style:none;}
#content_nav ul li { float:left; position:relative; margin:0px 20px 0px 60px;}
#content_nav li a { display:block; padding:40px 0px 0px 0px; text-decoration:none; color:#F03; font-weight:bold; text-align:left;}
#content_nav li a:hover { color:#F03; background:#F03; }
 
#body_main {float:left; width:705px; height:800px; background:#09F; margin: 5px 0px 5px 20px;}
 
#body_right {float:right; width:250px; height:800px; background:#09F; margin: 5px 20px 5px 5px;}
 
/*#body_main {float:left; width:550px; height:800px; background:#99CCFF; margin: 5px 0px 5px 0px;}*/
 
#footer {height:100px; background:#09F; margin: 5px 20px 10px 20px;}
 
.clear {clear:both;/*font-size:0px;line-height:0px;height:0px;width:1%;*/}
 
#banner { float:none; height:50px; width:960px; background:#CFC; padding:5px 0px 70px 0px; margin:5px 0px 0px 0px; clear:both; }
 
#logo { float:left; margin:0px 0px 0px 5px; }
 
#login { float:right; margin:0px 10px 0px 0px; display:inline; }
 
#login ul li{ display:inline; }
 
#lang { float:right; margin:0px 10px 0px 0px; clear:both; }
 
#search { float:right; margin:0px 10px 0px 0px; }
 
#slider { float:left; height:360px; background:#F36; margin:0px 30px 0px 30px; padding: 0px 30px 0px 30px; clear:both; }
 
#main_navigation { border:1px solid #FC6; float:none; background:#09F; font-family:Arial, Helvetica, sans-serif; font-size:13px; height:50px; margin:5px 0px 5px 0px; }
#main_navigation ul { float:left; list-style:none; padding-top: 14px;}
#main_navigation ul li { float:left; position:relative; margin:0px 2px 0px 9px;}
#main_navigation li a { display:block; padding:0.5em 3px; text-decoration:none; color:#009; font-weight:bold; text-align:left;}
#main_navigation li a:hover { color:#F03; background:#FC9;}
#main_navigation ul li > ul { position:absolute; display:none; width:18em; background:#FFC; z-index:100;}
#main_navigation ul li:hover > ul { display:block;}
#main_navigation ul li ul li { width:95%; position:relative; border:1px solid #00C; }
#main_navigation ul li > ul > li > ul{ position:absolute; display:none; width:18em; top:0px; left:220px; }
#main_navigation ul li > ul > li:hover > ul { display:block;}
#main_navigation ul li ul li ul li{ width:100%; }
 
 
/*footer*/
#copyright { font-size:0.8em; background:#09F; padding:1px; overflow:hidden; }
 
#copyright p { float:right; }
 
#footer_info { padding:10px; font-size:15px; background:#6FC; overflow:hidden; }
 
#footer_info div.division { float:left; font-size:14px; width: 200px; margin-right:10px; font-family:Verdana, Geneva, sans-serif; }
 
#footer_info h5 { color:#000; padding:5px; font-size:0.7em; margin:0px 0px 5px 0px; }
    virut.exe, 1/6/13
    #6
  7. Tiến Nava

    Tiến Nava Thành viên cấp 2

    ok tối nay rảnh sẽ làm lại cho bạn :)
    Tiến Nava, 1/6/13
    #7
    virut.exe thích bài viết này
  8. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    Muốn vạch phân các phần bạn bổ sung thêm thuộc tính border-bottom cho thẻ li là được nha!
    Nguyễn Tất Thắng, 1/6/13
    #8
    virut.exe thích bài viết này

Ủng hộ diễn đàn