我正在更新这个css megamenu,但是,我似乎无法摆脱项目不是下拉元素的标签外观。任何人都可以看到这个选项在CSS中的位置?我如何从这个CSS中删除标签megamenu
的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;
}
如果是这样我怎么能对菜单的背景只有当类是“的情况下下降”?
UPDATE哎呀忘了的jsfiddle: http://jsfiddle.net/ccslabs/j8o9pkjp/
是否哟问如何在选择时动态添加类“.drop”? – 2014-11-07 01:08:56
虽然我们可以根据这个CSS将你的标记看起来像是一样,但在这里也有真正的HTML有帮助。小提琴会很棒。 – 2014-11-07 01:12:09