Jquery 如何添加相同的CSS类来更改宽度

我的网站有问题。我不明白为什么要编写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;
}

---

这些列表中是否有空白或边距？如果是这样的话，您需要为该行的最后一个项目创建一个类似.last的类，并将padding或margin设置为0

您的外部div“dropdown_5columns”的宽度为920px

您正在尝试在那里安装5 x 200px。。。那只是太大了。

---

如果指定：.menu.colu_1{width:160px；}，它们将很好地放在那里。

我将尝试：在您提出问题的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中建立商店是一个非常漫长而痛苦的过程。

这就是menu.CSS文件的大部分内容。边距设置为零。你能写下你的代码，它将如何被格式化以添加到CSS文件中吗？你能做一个JSFIDLE或者提供页面链接，这样我就可以找到你了吗？当你的鼠标悬停在菜单上时，它在我的网站索引上。请向上滚动到我的问题，找到页面..menu li.last{padding:5px 0 1px}和应用类。最后为最后一项如果你能告诉我代码的外观，那会很有帮助，因为我随机复制并粘贴了你给我的代码，在不同的Firebug区域，但它不起作用。是的，你是对的，但我正在尝试集成160px和200px，因为160px会把它旁边的另一个菜单搞砸。的确，但是您正在尝试使用完全相同的css规则制作4列和5列布局。你得如何区分它们。你有一个“下拉列表”类，为什么不制作一个下拉列表，并将其设置为200px的宽度？如果我是一个好的程序员，我就能理解你告诉我的内容。我是个该死的疯子。我买的主题，我是一个搜索引擎优化专家。我不明白。你为什么不详细说明你的答案呢！