css下拉菜单模糊 |jq attr与css区别

css设置序号，css方框水平居中，css3动画面试，css3+上浮阴影，css背景图插入公式，css a点击后不变色，jq attr与css区别 css下拉菜单模糊 |jq attr与css区别

.navbar {
position: relative;
}
.dropdown-toggle {
padding: 10px;
font-size: 18px;
color: #333;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
min-width: 160px;
padding: 10px;
display: none;
}
.dropdown-menu a {
display: block;
padding: 5px 0;
color: #333;
text-decoration: none;
}
.dropdown-menu a:hover {
background-color: #f0f0f0;
}
.show {
display: block;
}

代码上面是偶写的下拉菜单的CSS样式，但是在页面运行的时候，偶发现下拉菜单变得模糊了。

原因是由于CSS的transform属性会让子元素继承它的属性，导致下拉菜单出现缩放的情况。

下面是解决方法：

.dropdown-menu {
transform: none;
}

在下拉菜单的样式加上transform: none; 就可以解决这个问题了。

这个问题虽然很小，但是对于网站的视觉效果来说很重要，解决方法也不难，希望可以帮助到大家。