如何添加相同的CSS類來更改寬度

Question

我在我的網站上有問題。我無法弄清楚爲什麼要編寫CSS代碼來控制整個菜單下拉菜單。

如果我把css類的寬度設置爲none;它會將品牌類別下拉列表以正確的2列5行格式進行排列。但它可以讓類別中的產品圖像相互覆蓋。

但是!!當我設置它;

 .menu .col_1 { 
width: 200px; 

} 

即螺絲了品牌類別，它應該是2列+ 5行的格式。

我應該在CSS文件中寫什麼代碼來改變它？

該網站是;

.menu-box { 
background: none no-repeat scroll 0 0 #000000; 
border-top: 1px solid #999999; 
/* clear: both;*/ 
float: left; 
margin-top: 1px; 
position: relative !important; 
} 
.menu { 
font-size: 12px; 
list-style: none; 
width: 960px; 
} 
.menu li { 
float: left; 
text-align: center; 
position: relative; 
padding: 5px 10px 1px; 
color: #FFF; 
height: 45px; 
} 
.menu li div li { 
height: auto; 
} 
.menu li:hover { 
z-index: 2; 
cursor: pointer; 
background: none no-repeat scroll 0 0 #888; 
    } 
.menu li small { 
color: #F5F5F5; 
display: block; 
font-size: 12px; 
text-transform: lowercase; 
/*line-height: 10px;*/ 
} 
.menu li a { 
padding-top: 2px; 
color: #FAFAFA; 
outline: 0 none; 
font-size: 14px; 
text-transform: uppercase; 
text-decoration: none; 
display: block; 
font-weight: bold; 
} 
.menu li:hover a { 
color: #FFF; 
} 
.menu li div span { 
color: #000000; 
cursor: default; 
font-size: 14px; 
letter-spacing: 0.5px; 
font-weight: bold; 
text-transform: uppercase; 
} 
.menu li div a { 
font-weight: normal; 
text-transform: none; 
} 
.menu li.sales div span { 
color:#E7160F; 
} 
.menu li div span.subtitle { 
padding-left: 8px; 
} 
.menu li .drop { 
padding-right: 21px; 
} 
.menu li.home { 
background: url("../images/cdd_btnhome.png") no-repeat scroll 20px 10px transparent; 
border-right: 1px solid #FFC24F; 
display: inline-block; 
padding-left: 20px; 
padding-right: 20px; 
width: 30px; 
} 
.menu li.home:hover { 
background: url("../images/cdd_btnhome.png") no-repeat scroll 20px 10px #888; 
} 
/*.menu li.sales { 
background: #000000; 
}*/ 
.menu li.sales:hover { 
background: #E7160F; 
} 
/*.menu li.sales a { 
color: #FFFFFF; 
}*/ 
.menu li.sales a:hover { 
color: #FFFFFF; 
} 
.menu li.sales ul li a:hover { 
color: #E7160F; 
} 
.menu li.support:hover { 
background: #888; 
} 
.menu li.support { 
/*background: #000000;*/ 
padding-right: 20px; 
padding-left: 29px; 
} 
/*.menu li.support a { 
color: #FFFFFF; 
}*/ 
.menu li.support a:hover { 
color: #FFFFFF; 
} 
.menu li.support ul li a:hover { 
color: #000000; 
} 
.menu li:hover .drop { 
padding-right: 21px; 
background: none; 
} 
.menu li:hover div a { 
color: #666; 
font-size: 12px; 
padding: 0 0 0 8px; 
} 
.menu li:hover div a:hover { 
background: #EEEEEE; 
} 
.menu li ul li a:hover { 
color: #000000; 
} 
/* Right aligned menu item */ 
.menu .right { 
border: none; 
float: right; 
right: 0; 
margin-right: 0; 
} 
.menu .support { 
border: medium none !important; 
float: right; 
margin-right: 0; 
right: 0; 
} 
/**************** Flyout Menu */ 
/* Left & right aligned common styles */ 
.menu .dropdown_1columns, 
.menu .dropdown_2columns, 
.menu .dropdown_3columns, 
.menu .dropdown_4columns, 
.menu .dropdown_5columns { 
margin: 4px auto; 
left: -999em; 
position: absolute; 
background: #FFFFFF; 
-moz-box-shadow: 0 3px 6px -3px #999; 
-webkit-box-shadow: 0 3px 6px -3px #999; 
box-shadow: 0 3px 6px -3px #999; 
border: 10px solid #888; 
padding: 10px; 
text-align: left; 
cursor: default; 
} 
.menu .dropdown_1columns_sales, 
.menu .dropdown_2columns_sales, 
.menu .dropdown_3columns_sales, 
.menu .dropdown_4columns_sales, 
.menu .dropdown_5columns_sales { 
margin: 4px auto; 
left: -999em; 
position: absolute; 
background: #FFFFFF; 
-moz-box-shadow: 0 3px 6px -3px #999; 
-webkit-box-shadow: 0 3px 6px -3px #999; 
box-shadow: 0 3px 6px -3px #999; 
border: 10px solid #E7160F; 
padding: 10px; 
text-align: left; 
cursor: default; 
} 
.menu .dropdown_1columns_support { 
background: #FFFFFF; 
border: 10px solid #888; 
padding: 10px; 
margin: 4px auto; 
position: absolute; 
left: -999em; 
text-align: left; 
-moz-box-shadow: 0 3px 6px -3px #999; 
-webkit-box-shadow: 0 3px 6px -3px #999; 
box-shadow: 0 3px 6px -3px #999; 
cursor: default; 
} 
/*.level1 { 
border-bottom: 1px dashed #DDDDDD; 
}*/ 
/* Drop Downs Sizes */ 
*/.menu .dropdown_1columns_sales { 
width: 169px; 
} 
.menu .dropdown_2columns_sales { 
width: 368px; 
} 
.menu .dropdown_3columns_sales { 
width: 500px; 
} 
.menu .dropdown_4columns_sales { 
width: 670px; 
} 
.menu .dropdown_5columns_sales { 
width: 920px; /*765px;*/ 
} 
.menu .dropdown_1columns_support { 
width: 176px; 
} 
/* Showing Drop Down on Mouse Hover - Left aligned */ 
.menu li:hover .dropdown_1columns_sales, 
.menu li:hover .dropdown_2columns_sales, 
.menu li:hover .dropdown_3columns_sales, 
.menu li:hover .dropdown_4columns_sales, 
.menu li:hover .dropdown_5columns_sales { 
left: 0; 
top: 43px; 
} 
.menu li:hover .dropdown_1columns_support { 
left: 0; 
top: 43px; 
} 
/* Drop Downs Sizes */ 
.menu .dropdown_1columns { 
width: 169px; 
} 
.menu .dropdown_2columns { 
width: 368px; 
} 
.menu .dropdown_3columns { 
width: 500px; 
} 
.menu .dropdown_4columns { 
width: 670px; 
} 
.menu .dropdown_5columns { 
width: 920px; /*765px;*/ 
} 
/* Showing Drop Down on Mouse Hover - Left aligned */ 
.menu li:hover .dropdown_1columns, 
.menu li:hover .dropdown_2columns, 
.menu li:hover .dropdown_3columns, 
.menu li:hover .dropdown_4columns, 
.menu li:hover .dropdown_5columns { 
left: 0; 
top: 43px; 
} 
/* Showing Drop Down on Mouse Hover - Right aligned */ 
.menu li .align_right { 
} 
.menu li:hover .align_right { 
left: auto; 
right: 0; 
top: 43px; 
} 
.menu li .align_right_support { 
} 
.menu li:hover .align_right_support { 
left: auto; 
right: 0; 
top: 43px; 
} 
/* Columns Sizes */ 
.menu .col_1, 
.menu .col_2, 
.menu .col_3, 
.menu .col_4, 
.menu .col_5 { 
display: inline; 
float: left; 
position: relative; 
/*margin: 0 0 10px;*/ 
min-height: 60px; 
padding: 0 15px 0 0; 
} 
.menu .col_1_support { 
display: inline; 
float: left; 
position: relative; 
/*margin: 0 0 10px;*/ 
min-height: 60px; 
padding: 0 15px 0 0; 
} 
.menu .col_1_support { 
width: 177px; 
} 
.menu .col_1 { 
width: 200px; 

} 
.menu .col_2 { 
width: 368px; 
} 
.menu .col_3 { 
width: 500px; 
} 
.menu .col_4 { 
width: 670px; 
} 
.menu .col_5 { 
width: 920px; 
} 
/* IMPORTANT */ 
/* Use the firstcolumn class for the items that stick to the left edge of the dropdown   */ 
.menu .firstcolumn { 
margin-left: 0; /* Clearing margin & left */ 
clear: left; 
border-right: medium none; 
} 
/**************** Flyout Menu Content */ 
.menu p, 
.menu ul, 
.menu li, 
.menu h2, 
.menu h3 { 
font-family: Arial,Helvetica,sans-serif; 
font-size: 14px; 
line-height: 18px; 
text-align: left; 
} 
.menu li.right { 
font-size: 14px; 
font-family: Arial, Helvetica, sans-serif; 
line-height: 21px; 
text-align: right; 
/*border-right: 1px solid #FFC24F;*/ 
} 
.menu .col_1_support ul { 
font-size: 14px; 
font-family: Arial, Helvetica, sans-serif; 
line-height: 21px; 
text-align: left; 
/*border-right: 1px solid #FFC24F;*/ 
} 
.menu .col_1_support li.divider { 
background: url("../images/cdd_hr.gif") repeat-x scroll left top transparent; 
/*border-right: 1px solid #FFC24F;*/ 
} 
.menu .col_1_support li.divider { 
height: 1px; 
margin: 10px 0; 
} 
.menu p { 
color: #999999; 
font-size: 12px; 
line-height: 18px; 
margin-bottom: 10px; 
} 
.menu .strong { 
font-weight: bold; 
} 
.menu .italic { 
font-style: italic; 
} 
.menu h2 { 
font-family: Arial, Helvetica, sans-serif; 
font-weight: 400; 
letter-spacing: -1px; 
font-size: 21px; 
line-height: 21px; 
margin-top: 7px; 
margin-bottom: 14px; 
padding-bottom: 14px; 
} 
.menu h3 { 
font-family: Arial, Helvetica, sans-serif; 
font-weight: bold; 
font-size: 14px; 
line-height: 21px; 
margin-top: 7px; 
margin-bottom: 14px; 
padding-bottom: 7px; 
} 
.menu .pusher { 
/* Use this pucher if you want to give more vertical spacing between your rows of  content */ 
margin-top: 18px; 
} 
/* Images styles */ 
.menu .imgshadow_light { 
/* Better style on light background */ 
background: #FFFFFF; 
padding: 4px; 
border: 1px solid #999999; 
margin-top: 5px; 
} 
.menu .img_left { 
/* Image sticks to the left */ 
width: auto; 
float: left; 
margin: 2px 15px 15px 0; 
} 
.menu .img_right { 
/* Image sticks to the right */ 
width: auto; 
float: right; 
margin: 2px 0 15px 15px; 
} 
/* Standard lists styles */ 
.menu li ul { 
list-style: none; 
padding: 0; 
margin: 0 0 12px 0; 
} 
.menu li ul li { 
font-size: 12px; 
line-height: 18px; 
position: relative; 
padding: 0; 
margin: 0; 
float: left; 
text-align: left; 
width: 169px; 
} 
.menu li ul li:hover { 
background: none; 
padding: 0; 
margin: 0; 
} 
/* 2-Levels Flyout */ 
.menu .levels { 
list-style: none; 
margin: 0; 
padding: 0; 
width: auto; 
} 
.menu .levels li li, 
.menu .levels li li:hover { 
width: 150px; 
padding: 0 12px 0 12px; 
margin: 0 0 0 1px; 
} 
.menu .levels ul { 
/* First level Flyout */ 
position: absolute; 
z-index: 500; 
top: -23px; 
left: 100%; 
display: none; 
width: 180px; 
background: #FFFFFF; 
margin: 15px 0 0 0; 
padding: 6px 0 6px 0; 
} 
.menu .levels ul ul { 
top: -6px; 
left: 100%; 
width: 180px; 
margin: -1px 0 0 0; 
} 
.menu li.position-right-li { 
border-right: 1px solid #FFC24F; 
position: static; 
} 
.menu li:hover div.position-right { 
position: absolute; 
right: 0; 
left: auto; 
top: 47px; 
} 
.menu .levels li:hover { 
cursor: pointer; 
z-index: 100; 
} 
.menu .levels li:hover ul ul, 
.menu .levels li li:hover ul ul { 
display: none; 
} 
.menu .levels li:hover ul, 
.menu .levels li li:hover ul { 
display: block; 
} 
.menu form { 
margin: 0 0 12px 0; 
padding: 0; 
} 

Answer 1

你有這些清單上的任何填充或利潤率？如果是這樣，您需要爲該行的最後一項創建一個類似.last的類，並將填充或邊距設置爲0

Answer 2

您的外部div「dropdown_5columns」的寬度爲920px。

你正試圖適應5 x 200像素在那裏......這只是大。 如果您指定：.menu .col_1 {width：160px;他們會很適合在那裏。

Answer 3

我會嘗試：在你把你的問題的CSS文件的最後，我建議你添加以下代碼：

.menu li ul li { 
    width: inherit; 
} 

.menu .col_1 { 
    min-width: 0px; 
} 
ul.menu > li > div > div > ul > li div.slideshow-box > ul { 
    width: 924px; 
    position:relative; 
    left:-12px; 
} 
ul.menu > li > div > div > ul > li div.slideshow-box > ul > li.item { 
    display: inline; 
    float: inherit; 
} 
.slideshow-box > ul > li.item > div > div.item-box { 
    margin-left: 12px; 
} 

它改變寬度的設置，使寬度不受限所有內容將佔據需要的寬度。然後，它會爲大菜單和大產品佈局框添加額外的佈局，使它們排成一列。

***編輯 我在上面的部分添加了更多的CSS和一些註釋，但是認真的說，我認爲您應該帶上知道更多CSS和HTML的人，或者您可能會發現在Magento中設置商店一個非常漫長而痛苦的過程。