logo标签列表

CSS：带箭头效果的下拉菜单

htmlcss
3

如何创建带箭头效果的下拉菜单，使其在ie8中也能正常工作。

我先裁剪了箭头图像，然后编写了以下CSS代码。它在Firefox和Chrome上运行完美，但在ie8上无法工作。有没有解决方案可以创建这样的菜单，使其在ie8中也能正常工作？

 .main-navigation li ul:before {
background: url("images/arow.png") no-repeat scroll left center / 100% auto transparent;
content: "";
display: block;
height: 22px;
left: -6px;
position: absolute;
top: -20px;
width: 222px;
z-index: 1;
 }

.main-navigation li ul {
background-color: #000000;border-color: -moz-use-text-color #494949 #494949;
border-radius: 0 0 5px 5px; border-style: none solid solid; border-width: 0 1px 1px;
box-shadow: 0 0 9px 1px rgba(0, 0, 1, 0.75); padding-top: 10px;  width: 212px; }

i used this image as arow

actual output needed

1
请查看以下链接。有多个菜单可用。下载源代码。阅读说明并使用它们：http://cssmenumaker.com/css-drop-down-menu - AnaMaria
3个回答
5
-1

另外，尝试在中添加以下内容。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
不，如果您使用此代码，则样式将与CSS兼容，即使是IE 10。您正在编写ASP.net应用程序吗？如果不是，它没有帮助。 - chanrlc
我碰巧知道Meta标签的工作原理。IE=edge表示IE应该使用其呈现引擎的最新（edge）版本。这不会对代码或与代码的兼容性产生任何影响。如果客户端正在使用ie6或ie7，并且您使用CSS3，则此Meta标签不会有任何区别。 - AnaMaria
请查看这个惊人的链接，了解更多关于元标签的信息：https://dev59.com/8mw15IYBdhLWcg3wMY2L - AnaMaria
在IE 6、7的情况下，CSS3可能无法正常工作，这是另一个问题。 - chanrlc
算了吧，我放弃了。再读一遍问题，看看你的回答是否适用。如果你觉得适用，那么我就是个白痴。 - AnaMaria
显示剩余2条评论
-3

在你的<head>标签之间添加这个元标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
元标签？楼主正在寻找在IE8中可用的CSS菜单，而不是寻找元标签。这些元标签不起作用。 - AnaMaria
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接