이 CSS 메가 메 뉴에서 탭을 제거하는 방법

그러나이 CSS 메가 메뉴를 업데이트하려고합니다. 그러나 요소를 드롭 다운하지 않는 항목에서 탭 모양을 제거 할 수는 없습니다. 누구든지이 옵션이 CSS에있는 곳을 볼 수 있습니까?이 CSS 메가 메 뉴에서 탭을 제거하는 방법

CSS의 :

body, ul, li { 
    font-size: 14px; 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 21px; 
    text-align: left; 
} 

#menu { 
    z-index: 5000; 
    list-style: none; 
    //width: 940px; 
    margin: 30px auto 0 auto; 
    height: 43px; 
    padding: 0 20px 0 20px; 
    /* Rounded Corners */ 

    border-radius: 10px; 
    /* Background color and gradients */ 
    background: #000; 
    background: -moz-linear-gradient(top, #666666, #000); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#666666), to(#000)); 
    /* Borders */ 
    border: 1px solid #666666; 

    box-shadow: inset 0 0 1px #edf9ff; 
} 

    #menu li { 
     float: left; 
     display: block; 
     text-align: center; 
     position: relative; 
     padding: 4px 10px 4px 10px; 
     margin-right: 30px; 
     margin-top: 7px; 
     border: none; 
    } 

     #menu li:hover { 
      border: 1px solid #777777; 
      padding: 4px 9px 4px 9px; 
      /* Background color and gradients */ 
      background: #000; 
      background: -moz-linear-gradient(top, #000, #333333); 
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#333333)); 
      /* Rounded corners */ 

      border-radius: 5px 5px 0 0; 
     } 

     #menu li a { 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 14px; 
      color: #EEEEEE; 
      display: block; 
      outline: 0; 
      text-decoration: none; 
      text-shadow: 1px 1px 1px #000; 
     } 

     #menu li:hover a { 
      color: #161616; 
      text-shadow: 1px 1px 1px #666666; 
     } 

     #menu li .drop { 
      padding-right: 21px; 
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzQ0NCMjI4QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzQ0NCMjI5QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNDQ0IyMjZDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNDQ0IyMjdDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dC35CAAAAjElEQVR42mJkYGBwA2JzBgj4z4AdMELpk8xA4jEQiwOxGBAz4cG3gHg7SMNfIH4AxHJAzIfDhidAvA6IvzNDBX4B8UMgVgFiLjTFb4F4NRB/BHGYkSS+A/EzIFYDYjao2BcgXgPEL2GKmNFM+wTE74FYHYj/AfEmIL6HrIAZi3vfAPEfqL/Oo0sCBBgAVkAa7BplR0gAAAAASUVORK5CYII=') /*img/drop.png*/ no-repeat right 8px; 
     } 

     #menu li:hover .drop { 
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzQ0NCMjI4QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzQ0NCMjI5QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNDQ0IyMjZDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNDQ0IyMjdDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dC35CAAAAjElEQVR42mJkYGBwA2JzBgj4z4AdMELpk8xA4jEQiwOxGBAz4cG3gHg7SMNfIH4AxHJAzIfDhidAvA6IvzNDBX4B8UMgVgFiLjTFb4F4NRB/BHGYkSS+A/EzIFYDYjao2BcgXgPEL2GKmNFM+wTE74FYHYj/AfEmIL6HrIAZi3vfAPEfqL/Oo0sCBBgAVkAa7BplR0gAAAAASUVORK5CYII=') /*img/drop.png*/ no-repeat right 7px; 
     } 

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns { 
    z-index: 5000; 
    margin: 4px auto; 
    float: left; 
    position: absolute; 
    left: -999em; /* Hides the drop down */ 
    text-align: left; 
    padding: 10px 5px 10px 5px; 
    border: 1px solid #777777; 
    border-top: none; 
    /* Gradient background */ 
    background: #333333; 
    background: -moz-linear-gradient(top, #333333, #555555); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#555555)); 
    /* Rounded Corners */ 

    border-radius: 0 5px 5px 5px; 
} 

.dropdown_1column { 
    width: 140px; 
} 

.dropdown_2columns { 
    width: 280px; 
} 

.dropdown_3columns { 
    width: 420px; 
} 

.dropdown_4columns { 
    width: 560px; 
} 

.dropdown_5columns { 
    width: 700px; 
} 

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
    left: -1px; 
    top: auto; 
} 

.col_1, 
.col_2, 
.col_3, 
.col_4, 
.col_5 { 
    display: inline; 
    float: left; 
    position: relative; 
    margin-left: 5px; 
    margin-right: 5px; 
} 

.col_1 { 
    width: 130px; 
} 

.col_2 { 
    width: 270px; 
} 

.col_3 { 
    width: 410px; 
} 

.col_4 { 
    width: 550px; 
} 

.col_5 { 
    width: 690px; 
} 

#menu .menu_right { 
    float: right; 
    margin-right: 0; 
} 

#menu li .align_right { 
    /* Rounded Corners */ 

    border-radius: 5px 0 5px 5px; 
} 

#menu li:hover .align_right { 
    left: auto; 
    right: -1px; 
    top: auto; 
} 

#menu p, #menu h2, #menu h3, #menu ul li { 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 21px; 
    font-size: 12px; 
    text-align: left; 
    text-shadow: 1px 1px 1px #000; 
} 

#menu h2 { 
    font-size: 21px; 
    font-weight: 400; 
    letter-spacing: -1px; 
    margin: 7px 0 14px 0; 
    padding-bottom: 14px; 
    border-bottom: 1px solid #666666; 
} 

#menu h3 { 
    font-size: 14px; 
    margin: 7px 0 14px 0; 
    padding-bottom: 7px; 
    border-bottom: 1px solid #888888; 
} 

#menu p { 
    line-height: 18px; 
    margin: 0 0 10px 0; 
} 

#menu li:hover div a { 
    font-size: 12px; 
    color: #ebea97; 
} 

    #menu li:hover div a:hover { 
     color: #000; 
    } 


.strong { 
    font-weight: bold; 
} 

.italic { 
    font-style: italic; 
} 

.imgshadow { /* Better style on light background */ 
    background: #333333; 
    padding: 4px; 
    border: 1px solid #000; 
    margin-top: 5px; 

    box-shadow: 0 0 5px #333333; 
} 

.img_left { /* Image sticks to the left */ 
    width: auto; 
    float: left; 
    margin: 5px 15px 5px 5px; 
} 

#menu li .black_box { 
    background-color: #333333; 
    color: #888888; 
    /* text-shadow: 1px 1px 1px #000; */ 
    padding: 4px 6px 4px 6px; 
    /* Rounded Corners */ 

    border-radius: 5px; 
    /* Shadow */ 

    box-shadow: inset 0 0 3px #555555; 
} 

#menu li ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 12px 0; 
} 

    #menu li ul li { 
     font-size: 12px; 
     line-height: 24px; 
     position: relative; 
     text-shadow: 1px 1px 1px #000; 
     padding: 0; 
     margin: 0; 
     float: none; 
     text-align: left; 
     width: 130px; 
    } 

     #menu li ul li:hover { 
      background: none; 
      border: none; 
      padding: 0; 
      margin: 0; 
     } 

#menu li .greybox li { 
    background: #777777; 
    border: 1px solid #333333; 
    margin: 0 0 4px 0; 
    padding: 4px 6px 4px 6px; 
    width: 116px; 
    /* Rounded Corners */ 

    border-radius: 5px; 
} 

    #menu li .greybox li:hover { 
     background: #777777; 
     border: 1px solid #edf9ff; 
     padding: 4px 6px 4px 6px; 
     margin: 0 0 4px 0; 
    }

나는 문제가 여기에있다 생각 :

#menu li .drop { 
      padding-right: 21px; 
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzQ0NCMjI4QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzQ0NCMjI5QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNDQ0IyMjZDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNDQ0IyMjdDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dC35CAAAAjElEQVR42mJkYGBwA2JzBgj4z4AdMELpk8xA4jEQiwOxGBAz4cG3gHg7SMNfIH4AxHJAzIfDhidAvA6IvzNDBX4B8UMgVgFiLjTFb4F4NRB/BHGYkSS+A/EzIFYDYjao2BcgXgPEL2GKmNFM+wTE74FYHYj/AfEmIL6HrIAZi3vfAPEfqL/Oo0sCBBgAVkAa7BplR0gAAAAASUVORK5CYII=') /*img/drop.png*/ no-repeat right 8px; 
     } 

     #menu li:hover .drop { 
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzQ0NCMjI4QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzQ0NCMjI5QzRCOTExREY5OUYxOENDN0Q2NTk4QjQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNDQ0IyMjZDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNDQ0IyMjdDNEI5MTFERjk5RjE4Q0M3RDY1OThCNDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dC35CAAAAjElEQVR42mJkYGBwA2JzBgj4z4AdMELpk8xA4jEQiwOxGBAz4cG3gHg7SMNfIH4AxHJAzIfDhidAvA6IvzNDBX4B8UMgVgFiLjTFb4F4NRB/BHGYkSS+A/EzIFYDYjao2BcgXgPEL2GKmNFM+wTE74FYHYj/AfEmIL6HrIAZi3vfAPEfqL/Oo0sCBBgAVkAa7BplR0gAAAAASUVORK5CYII=') /*img/drop.png*/ no-repeat right 7px; 
     }

그 클래스가 "인 경우에만 나는 메뉴의 배경이 할 수있는 방법 인 경우에 하락"? http://jsfiddle.net/ccslabs/j8o9pkjp/

출처

2014-11-07 Dave Gordon

를 묻는 그것이 선택되면'.drop' 클래스를 동적으로 추가 하시겠습니까? –

우리는 아마도이 CSS를 기반으로 마크 업이 어떻게 생겼는지 함께 생각할 수 있지만 여기에도 실제 HTML을 가지고 있으면 도움이 될 것입니다. 바이올린은 훌륭합니다. –

문제는 당신은 그들이 드롭 다운이없는 경우에도 모든 LI의 호버에 그라데이션을 적용하는 것입니다 :

UPDATE 아차는 jsFiddle를 잊어 버렸습니다. 당신의 드롭 다운 목록 항목에 클래스를 추가하고 만 리의에 그라데이션을 적용 해보십시오 :

Updated Fiddle

CSS :

#menu li.dropdown:hover { 
    border: 1px solid #777777; 
    padding: 4px 9px 4px 9px; 

    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 

#menu li.dropdown:hover a { 
    color:#161616; 
    text-shadow: 1px 1px 1px #ffffff; 
}

HTML : 요 방법

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 



<title>Mega Drop Down Menu</title> 
<!--[if IE 6]> 
<style> 
body {behavior: url("csshover3.htc");} 
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px; 
</style> 
<![endif]--> 

</head> 

<body> 

<ul id="menu"> 

    <li><a href="#" >Home</a>  
    </li><!-- End Home Item --> 

    <li class="dropdown"><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item --> 

     <div class="dropdown_5columns"><!-- Begin 5 columns container --> 

      <div class="col_5"> 
       <h2>This is an example of a large container with 5 columns</h2> 
      </div> 

      <div class="col_1"> 
       <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p> 
      </div> 

      <div class="col_1"> 
       <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p> 
      </div> 

      <div class="col_1"> 
       <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p> 
      </div> 

      <div class="col_1"> 
       <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p> 
      </div> 

      <div class="col_1"> 
       <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p> 
      </div> 

      <div class="col_5"> 
       <h2>Here is some content with side images</h2> 
      </div> 

      <div class="col_3"> 

       <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> 
       <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p> 

       <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> 
       <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p> 

      </div> 

      <div class="col_2"> 

       <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p> 

      </div> 

     </div><!-- End 5 columns container --> 

    </li><!-- End 5 columns Item --> 

    <li class="dropdown"><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item --> 

     <div class="dropdown_4columns"><!-- Begin 4 columns container --> 

      <div class="col_4"> 
       <h2>This is a heading title</h2> 
      </div> 

      <div class="col_1"> 

       <h3>Some Links</h3> 
       <ul> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
       </ul> 

      </div> 

      <div class="col_1"> 

       <h3>Useful Links</h3> 
       <ul> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 

      </div> 

      <div class="col_1"> 

       <h3>Other Stuff</h3> 
       <ul> 
        <li><a href="#">FreelanceSwitch</a></li> 
        <li><a href="#">Creattica</a></li> 
        <li><a href="#">WorkAwesome</a></li> 
        <li><a href="#">Mac Apps</a></li> 
        <li><a href="#">Web Apps</a></li> 
       </ul> 

      </div> 

      <div class="col_1"> 

       <h3>Misc</h3> 
       <ul> 
        <li><a href="#">Design</a></li> 
        <li><a href="#">Logo</a></li> 
        <li><a href="#">Flash</a></li> 
        <li><a href="#">Illustration</a></li> 
        <li><a href="#">More...</a></li> 
       </ul> 

      </div> 

     </div><!-- End 4 columns container --> 

    </li><!-- End 4 columns Item --> 

    <li class="menu_right dropdown"><a href="#" class="drop">1 Column</a> 

     <div class="dropdown_1column align_right"> 

       <div class="col_1"> 

        <ul class="simple"> 
         <li><a href="#">FreelanceSwitch</a></li> 
         <li><a href="#">Creattica</a></li> 
         <li><a href="#">WorkAwesome</a></li> 
         <li><a href="#">Mac Apps</a></li> 
         <li><a href="#">Web Apps</a></li> 
         <li><a href="#">NetTuts</a></li> 
         <li><a href="#">VectorTuts</a></li> 
         <li><a href="#">PsdTuts</a></li> 
         <li><a href="#">PhotoTuts</a></li> 
         <li><a href="#">ActiveTuts</a></li> 
         <li><a href="#">Design</a></li> 
         <li><a href="#">Logo</a></li> 
         <li><a href="#">Flash</a></li> 
         <li><a href="#">Illustration</a></li> 
         <li><a href="#">More...</a></li> 
        </ul> 

       </div> 

     </div> 

    </li> 

    <li class="menu_right dropdown"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item --> 

     <div class="dropdown_3columns align_right"><!-- Begin 3 columns container --> 

      <div class="col_3"> 
       <h2>Lists in Boxes</h2> 
      </div> 

      <div class="col_1"> 

       <ul class="greybox"> 
        <li><a href="#">FreelanceSwitch</a></li> 
        <li><a href="#">Creattica</a></li> 
        <li><a href="#">WorkAwesome</a></li> 
        <li><a href="#">Mac Apps</a></li> 
        <li><a href="#">Web Apps</a></li> 
       </ul> 

      </div> 

      <div class="col_1"> 

       <ul class="greybox"> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
       </ul> 

      </div> 

      <div class="col_1"> 

       <ul class="greybox"> 
        <li><a href="#">Design</a></li> 
        <li><a href="#">Logo</a></li> 
        <li><a href="#">Flash</a></li> 
        <li><a href="#">Illustration</a></li> 
        <li><a href="#">More...</a></li> 
       </ul> 

      </div> 

      <div class="col_3"> 
       <h2>Here are some image examples</h2> 
      </div> 

      <div class="col_3"> 
       <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> 
       <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p> 

       <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> 
       <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p> 
      </div> 

     </div><!-- End 3 columns container --> 

    </li><!-- End 3 columns Item --> 


</ul> 

</body> 

</html>

출처

2014-11-07 01:26:07

그 사람에게 시가를주세요 - 작동 할뿐만 아니라 쉽게 수행되고 구현 및 테스트하는 데 30 초도 채 걸리지 않았습니다. 나는 지적인 사람들을 사랑합니다! 감사. –

이 CSS 메가 메 뉴에서 탭을 제거하는 방법

답변

관련 문제