.dropdown .dd { width: 210px; height: 465px; background-color: #c81623; margin-top: 2px; } .dropdown .dd { display: none; } .dropdown .dt:hover .dd { display: block; }修改代码，使鼠标滑过dt时，dd不隐藏，并且相应属性可以实现

如果你想要鼠标滑过 `dt` 盒子时，让 `dd` 盒子不隐藏，并且设置其属性，可以使用以下 CSS 代码：

.dropdown .dd {
  width: 210px;
  height: 465px;
  background-color: #c81623;
  margin-top: 2px;
}

.dropdown:hover .dd {
  display: block;
}

这段代码的意思是，先设置 `dd` 盒子的属性，例如宽度、高度、背景色和上边距等。然后，当鼠标滑过 `.dropdown` 盒子时，选择所有子元素的 `.dd` 盒子，将其显示出来。这样就可以实现鼠标滑过 `dt` 盒子时让 `dd` 盒子显示，并设置其属性。

相关问题

.dropdown .dt { width: 100%; height: 100%; color: #fff; text-align: center; line-height: 45px; font-size: 16px; } .dropdown .dd { display: none; width: 210px; height: 465px; background-color: #c81623; margin-top: 2px; } .dropdown .dt:hover+.dd { display: block; }修改代码，当鼠标经过dt的时候dd显示并且dd对应的属性都正常执行

根据你提供的代码，已经实现了当鼠标经过.dt时，紧邻的下一个.dd元素显示。如果你想让.dd对应的属性都正常执行，可以按如下方法修改：

.dropdown:hover .dd {
display: block;
}

这样修改可以实现当鼠标经过整个.dropdown区域时，所有的.dd元素都显示，并且.dd对应的属性都正常执行。

*{ margin: 0; padding: 0; text-decoration: none; list-style: none; color: black; border: none; outline: none; } .topArea{ width: inherit; height: 500px; background-color: #414fe4; } .topArea>ul{ background-color: rgb(82, 82, 82); width: 100%; height: 50px; } .topArea>ul>li{ float: left; color: white; height: 50px; width: 100px; text-align: center; line-height: 50px; border-radius: 10px; cursor: pointer; margin: 0px 10px; } .topArea>ul>li:hover{ background-color: rgb(52, 52, 52); } .drop1:hover .dropDown1,.drop2:hover .dropDown2,.drop3:hover .dropDown3{ display: block; } .dropDown1,.dropDown2,.dropDown3{ background-color: azure; display: none; position: relative; /* width: 100px; height: 100px; */ z-index: 1; border-radius: 10px; } .dropDown1 li,.dropDown2 li,.dropDown3 li{ border-radius: 10px; } .dropDown1 li:hover,.dropDown2 li:hover,.dropDown3 li:hover{ background-color: #b5b5b5; } .menu1:hover .getMenu1,.menu8:hover .getMenu8{ display: block; } .getMenu1,.getMenu8{ display: none; position: absolute; left: 100%; background-color: white; border-radius: 10px; } /* [class^="getMenu"] { top: calc((attr(class, numeric)-1) * 50px); } */ [class^="getMenu"] { --menu-index: calc(1em * (parseInt(attr(class, 'numeric')) - 1)); top: var(--menu-index); } .getMenu1 li,.getMenu8 li{ float: none; width: 100px; height: 50px; }这段css代码中[class^="getMenu"] { --menu-index: calc(1em * (parseInt(attr(class, 'numeric')) - 1)); top: var(--menu-index); }没有生效怎么办

如果这段CSS代码没有生效，可能有以下几个原因：

1. 浏览器不支持CSS变量和属性选择器

如果您使用的是比较老的浏览器版本，可能会导致CSS变量和属性选择器无法生效。可以尝试升级浏览器版本，或者使用其他的CSS技术来实现类似的效果。

2. 类选择器没有匹配到对应的元素

如果您的HTML代码中没有任何一个class属性以"getMenu"开头的元素，那么这个类选择器就不会匹配到任何元素，从而导致样式没有生效。可以检查一下HTML代码，看看是否有符合条件的元素。

3. 代码中出现了其他错误

如果以上两个原因都排除了，那么可能是代码中出现了其他语法错误，导致整个规则失效。可以仔细检查一下代码，看看是否有拼写错误、语法错误等等。

另外，您可以使用浏览器的开发者工具来检查这段CSS代码是否被正确应用到了相应的元素上。如果没有被应用，那么开发者工具会显示相应的错误信息，帮助您找到问题所在。