css下拉菜单代码

css下拉菜单代码,第1张

我给楼主看了一下```你要的效果没说清楚`如果想显示出下拉列表直接删掉 #menu li dd{display:none;

}

就可以了。如果想鼠标移动后,出现下拉列表,我没看到楼主定义这个类型,所以给楼主一个我以前写的,仅供参考。

imcm ul,imcm li,imcm div,imcm span,imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}

imcm li a img{display:inline;border-width:0px;}

imcm span{display:inline;}

imcm imclear,imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}imcm imsc{position:relative;}imcm imsubc{position:absolute;visibility:hidden;}imcm li{list-style:none;font-size:1px;float:left;}imcm ul ul li{width:100;float:left !important;}

imcm a{display:block;position:relative;}

imcm ul imsc,imcm ul imsubc {z-index:10;}

imcm ul ul imsc,imcm ul ul imsubc{z-index:20;}

imcm ul ul ul imsc,imcm ul ul ul imsubc{z-index:30;}

imde ul li:hover imsubc{visibility:visible;}

imde ul ul li:hover

imsubc{visibility:visible;}

imde ul ul ul li:hover

imsubc{visibility:visible;}

imde li:hover ul imsubc{visibility:hidden;}

imde li:hover ul ul imsubc{visibility:hidden;}

imde li:hover ul ul ul imsubc{visibility:hidden;}

imcm imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}

imcm imea span{display:block;position:relative;font-size:1px;line-height:0px;}dvs,dvm{border-width:0px}/\///imcm imea{visibility:hidden;}//</style><!--[if IE]><style type="text/css">imcm imea span{position:absolute;}imcm imclear,imclear{display:none;}imcm{zoom:1;} imcm li{curosr:hand;} imcm ul{zoom:1}imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">imcm imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end-->

<!--[imstyles] Infinite Menu Styles: Keep this section in the document head for full validation -->

<style type="text/css">

/ --[[ Main Expand Icons ]]-- /

#imenus0 imeam span,#imenus0 imeamj span {background-image:url(bg-daohangSjpg); width:1px; height:12px; left:0px; top:0px; background-repeat:no-repeat;background-position:top left;}

#imenus0 li:hover imeam span,#imenus0 li aiactive imeamj span {background-image:url(bg-daohangSjpg); background-repeat:no-repeat;background-position:top left;}

/ --[[ Sub Expand Icons ]]-- /

#imenus0 ul imeas span,#imenus0 ul imeasj span {background-image:url(stub_arrow_rightgif); width:6px; height:8px; left:0px; top:3px; background-repeat:no-repeat;background-position:top left;}

#imenus0 ul li:hover imeas span,#imenus0 ul li aiactive imeasj span {background-image:url(stub_arrow_rightgif); background-repeat:no-repeat;background-position:top left;}

/ --[[ Main Container ]]-- /

#imouter0 {background-color:#95D4CC; border-style:none; border-color:#CCCCCC; border-width:1px; padding:0px; margin:0px; }

/ --[[ Sub Container ]]-- /

#imenus0 li ul {background-color:#95d4cc; border-style:solid; border-color:#687a54; border-width:1px; padding:5px 8px 5px 5px; margin:0px; }

/ --[[ Main Items ]]-- /

#imenus0 li a, #imenus0 imctitle {height:16px; background-color:#95D4CC; color:#000; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; padding:3px 6px 1px; margin:0px 5px 0px 0px; }

/ [hover] - These settings must be duplicated for IE compatibility/

#imenus0 li:hover>a {background-color:#5B9890; text-decoration:none; }

#imenus0 li aihover, imde imenus0 a:hover {background-color:#95d4cc; text-decoration:none; }

/ [active] /

#imenus0 li aiactive {}

/ --[[ Sub Items ]]-- /

#imenus0 ul a, #imenus0 imsubc li imctitle {height:auto; background-color:transparent; color:#000; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:solid; border-color:#95d4cc; border-width:1px 0px; padding:2px 5px; margin:0px; }

/ [hover] - These settings must be duplicated for IE comptatibility/

#imenus0 ul li:hover>a {background-color:#5B9890; text-decoration:none; border-color:#687a54; }

#imenus0 ul li aihover {background-color:#5B9890; text-decoration:none; border-color:#687a54; }

/ [active] /

#imenus0 ul li aiactive {}

这是滚动条

你可以用

<asp:textbox ID="Textbox1" TextMode="MultiLine" runat="server"></asp:textbox>

<textarea id="TextArea1" cols="20" rows="2"></textarea>

这俩个 那个都可以 都是多行文本框 可以输入、可以复制、还有滚动条

一种超级简单的二级下拉菜单制作方法,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

<html xmlns=">

<head>

<meta >

<title>简单的二级下拉菜单</title>

<style type="text/css">

#FM > li > ulfm{ display:none;}

#FM > li:hover >ulfm{ display:block;}

</style>

</head>

<body>

</body>

</html>

<body>

<ul id="FM">

<li><a href="#">首页</a>

<ul class="fm">

<li><a href="#">这是二级菜单</a></li>

<li><a href="#">这是二级菜单</a></li>

</ul>

</li>

<li><a href="#">关于我们</a>

<ul class="fm">

<li><a href="#">这是二级菜单</a></li>

<li><a href="#">这是二级菜单</a></li>

</ul>

</li>

</li>

</ul>

</body>

</html>

所作出来的效果为:

这样子就很快的用css实现简单的二级下拉菜单啦!

以上就是关于css下拉菜单代码全部的内容,包括:css下拉菜单代码、帮看下这样的是下拉菜单吗求一个CSS的这样的菜单代码。、css怎样实现简单的二级下拉菜单等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9484036.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存