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

2 đoạn css không tương thích nhờ mọi người giúp đỡ

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi Hoàng Tuấn Vũ, 26/10/12.

Lượt xem: 2,407

  1. Hoàng Tuấn Vũ Mới đăng kí

    Mình có 2 đoạn code của 2 file css này để định dạng cho menu ngang nhưng không đồng nhất nó được.
    HTML:
    <div id='csscssmenu'>
    <ul>
    <li>
    home
    </li>
    <ul>
    <li>
    Tin tuc
    </li>
    </ul>
    </ul>
    Đoạn css đầu tiên ốp vào thì được nhưng đoạn thứ 2 thì khi rê chuột qua không hiện tin tức lên: Em mới học CSS mong các bác xem giúp
    CSS:

    HTML:
    #Menu
    {
        /*background-image: url(ImagesDesign/Menu.png);*/
        background-color:Green;
        height: 41px;
        width: 100%;
    }
    #Menu ul
    {
        color: white;
        list-style-type: none;
        padding: 0px;
        margin: 0px;
    }
     
    #Menu ul li
    {
        width: 110px;
        display: block;
        position: relative;
        float: left;
        text-align: center;
        line-height: 42px; /*border-right: dotted 1px #84ac0b;*/
        font-size: 10pt;
        font-family: Tahoma, Arial;
        font-weight: bold;
    }
     
    #Menu ul li a
    {
        text-decoration: none;
        color: White;
    }
    #Menu ul li:hover
    {
        /*background-image: url(ImagesDesign/HoverMenu.png);*/
        background-color:#e2cc15;
        color: Green;
    }
    #Menu ul li a:hover
    {
        color: Green;
    }
    #Menu ul ul
    {
        visibility: hidden;
        position: absolute;
        top: 42px;
        left: 0px;
        background-color: Green;
        z-index: 10;
        font-size: 9pt;
    }
    #Menu ul li li
    {
        text-align: left;
        padding-left: 10px;
        border-bottom: dotted 1px white;
        border-right-style: none;
        width: 170px;
        font-size: 10pt;
        height: 35px;
        line-height: 35px;
    }
    #Menu ul li li:hover
    {
        background-color: #59600c;
        background-image: none;
        color: #ede61f;
    }
    #Menu ul li li a:hover
    {
        color: #ede61f;
    }
    #Menu ul li:hover ul
    {
        visibility: visible;
    }
    
    HTML:
    #cssmenu{ height:37px; display:block; padding:0; margin:0;  border:1px solid; border-radius:5px; }
    #cssmenu > ul {list-style:inside none; padding:0; margin:0;}
    #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
    #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
    #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
    #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
    #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
    #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
    #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
    #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
    #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
    #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
    #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
    #cssmenu ul li > ul{width:200px;}
    #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
    #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
    #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#4fbdf0; background:-moz-linear-gradient(top, #4fbdf0 0%, #45b2d2 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fbdf0), color-stop(100%,#45b2d2)); background:-webkit-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:-o-linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); background:-ms-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fbdf0', endColorstr='#45b2d2',GradientType=0); }
    #cssmenu{border-color:#3589a1;}
    #cssmenu > ul > li > a{border-right:1px solid #3589a1; color:#fff;}
    #cssmenu > ul > li > a:after{border-color:#6ed1ff;}
    #cssmenu > ul > li > a:hover{background:#36acd2;}
    

    ...
  2. MioDung

    MioDung Thành viên cấp 3

    Dùng thế này là được rùi của bạn sao cho nhiều ul thế

    <div id='csscssmenu'>
    <ul>
    <li>Home</li>
    <li>Giới thiệu</li>
    <li>Sản phẩm</li>
    </ul>
    </div>

Ủng hộ diễn đàn