CSS实现弹出菜单效果中的弹出问题 怎么用html5语法实现这种底部弹出菜单效果
CSS\u5f39\u51fa\u83dc\u5355\uff0c\u600e\u4e48\u80fd\u907f\u514d\u5f39\u51fa\u83dc\u5355\u540e\uff0c\u7f51\u9875\u4e0b\u9762\u7684\u5185\u5bb9\u968f\u4e4b\u4e0b\u79fb\uff1f\u5c062\u7ea7\u83dc\u5355\u7684position\u8bbe\u4e3aabsolute\u5c31\u53ef\u4ee5,\u8fd9\u6837\u5c31\u4e0d\u4f1a\u628a\u7f51\u9875\u7684\u4e0b\u90e8\u4efd\u5185\u5bb9\u5f80\u4e0b\u79fb
\u89e3\u51b3\u65b9\u6cd5:
\u5728div2 \u52a0\u591a\u4e00\u4e2a\u5c5e\u6027position:absolute
\u5728div, ul, li \u7684position:static\u6539\u4e3aposition:relative
\u53ea\u9700\u8981\u505a\u597d\u6837\u5f0f\uff0c\u9690\u85cf\u663e\u793a\u5c31\u597d\u4e86
你看css里面，有li:hover这个伪类，这个伪类，ie7，firefox可以识别，但是ie6不能识别，所以为了只能用a:hover去模拟li:hover。可以看到，用ie6的解析方式，下拉菜单的<ul>是包裹在<a>里面的，而用ie7、firefox的解析方式看，下拉菜单的<ul>则是在<a>之外的，这就是<!--[if lte IE 6]><table><tr><td><![endif]-->这些代码的用处，如果你只想它在ie6下起作用，而不考虑其他浏览器，你可以把由<!--[if IE 7]>和<![endif]-->包裹的内容去掉，在去掉<!--[if lte IE 6]></td></tr></table></a><![endif]--> 的时候，不要把里面包裹的内容去掉，如<!--[if lte IE 6]></td></tr></table></a><![endif]-->，得保留]</td></tr></table></a><!--[if lte IE 6]></td></tr></table></a><![endif]-->
这是注解条件式（conditional comment）用来分别 IE 版本的。
我想可能是针对两种浏览器做的不同设置和优化。。。。IE6 和IE7程序运行还是有点不一样的。。。7在刚推出的时候很多网站是不兼容的。。。
绛旓細鍦ㄨ蒋浠跺彸渚ч夋嫨濂解渢emplate鈥濓紙妯℃澘锛夛紝鍦ㄥ弻鍑诲乏渚х殑鈥淚tem鈥濆彲浠ョ紪杈戞樉绀虹殑鏂囧瓧鍐呭銆備篃鍙互鍦ㄥ乏涓嬫柟鐨勮〃鍗曚腑淇敼鈥淚tem鈥濈殑鍐呭銆備篃鍙互鍦ㄥ乏涓嬫柟鐨勮〃鍗曚腑淇敼鍐呭銆傚叾瀹冧釜鎬у寲鐨勮皟鏁村彲浠ュ湪鍙充笅鏂圭殑琛ㄥ崟涓繘琛屻傝繖鍏朵腑鐨勮皟鏁村唴瀹硅繕鏄尯澶氱殑銆傜◢寰慨鏀逛笅灏卞彲浠ョ殑鍒颁釜鎬у寲鐨勫脊鍑鸿彍鍗鍟︺傚埗浣滃ソ鍚庡彲浠ラ夋嫨淇濆瓨...
绛旓細浣犵湅css閲岄潰锛屾湁li:hover杩欎釜浼被锛岃繖涓吉绫伙紝ie7锛宖irefox鍙互璇嗗埆锛屼絾鏄痠e6涓嶈兘璇嗗埆锛屾墍浠ヤ负浜嗗彧鑳界敤a:hover鍘绘ā鎷焞i:hover銆傚彲浠ョ湅鍒帮紝鐢╥e6鐨勮В鏋愭柟寮忥紝涓嬫媺鑿滃崟鐨鏄寘瑁瑰湪閲岄潰鐨勶紝鑰岀敤ie7銆乫irefox鐨勮В鏋愭柟寮忕湅锛屼笅鎷夎彍鍗曠殑鍒欐槸鍦ㄤ箣澶栫殑锛岃繖灏辨槸<!--[if lte IE 6]><![endif]-->杩欎簺浠ｇ爜鐨...
绛旓細upmenu-姘村钩绔栧脊鍚戜笂涓夌骇寮瑰嚭鑿滃崟/* common styling */.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:lef...
绛旓細杩樻湁涓绉嶅師鐞嗭紝鍒╃敤body鐨勭偣鍑讳簨浠舵潵鎿嶄綔鍏冪礌鐨勶紝涔熸槸鍙互鐨勶紝浣嗘槸瑕佸埄鐢ㄥ埌js姣旇緝楹荤儲锛屼笅闈㈢殑杩欎釜demo鏄彧闇瑕佺敤鍒css灏卞彲浠瀹炵幇鐨 OnHereHelloWord 鍒涘缓涓涓粴鍔鑿滃崟鐨HTML浠ｇ爜鏄紵棰濇寜杩欓鐩潵璇达紝灏辨槸鍒涘缓涓涓笅鎷夎彍鍗==锛丄.鏄〃鍗
绛旓細 /* 1. 娓呴櫎ul榛樿鏍峰紡 */ ul { padding: 0;margin: 0;list-style: none;} /* 2. 璁剧疆姘村钩鏂瑰悜涓昏彍鍗, 璁剧疆瀛鑿滃崟寮瑰嚭浣嶇疆鐩稿浜庡綋鍓嶇埗鑿滃崟椤 */ li { float: left; /* 浜х敓姘村钩鑿滃崟 */ position: relative; /* position涓洪潪static鏃舵墠鑳借瀛愯彍鍗曞脊鍑轰綅缃浉瀵瑰綋鍓嶈彍鍗曢」 */ width: ...
绛旓細鍒朵綔瀵艰埅鏉＄殑娲诲姩寮瑰嚭鑿滃崟鏂规硶涓锛1.棣栧厛鍒涘缓涓涓1x6鐨勮〃鏍硷紝鍙傛暟涓猴細border=0 cellspacing=3 cellpadding=0锛2.鍦ㄨ繖涓〃鏍肩殑姣忎釜鍗曞厓鏍煎唴鍒嗗埆鎻掑叆涓涓〃鏍硷紝瀹藉害鍜岄珮搴﹁涓100%锛3.寤虹珛涓涓css鏍峰紡.up鍜.down锛涗唬鐮佸涓嬶細 .up{ border:4 outset royalblue;color:yellow;background:blue;cursor:hand...
绛旓細description" content="鎼滅嫍鐣ユ噦銆乧ss鍒嗕韩" titlecss瀹炵幇涓嬫媺瀵艰埅鏍鑿滃崟/title style type="text/css" * { margin:0; padding:0; } .jiao ul li a:hover{ color:#red; } ul, li { list-style:none; } a { text-decoration:none; } .jiao { border:5px ...
绛旓細1銆佽鍗曞嚮鈥滄枃浠垛濃滄柊寤衡濅互鍒涘缓鏂扮殑web婧愭枃浠躲2銆侀粯璁ゆ儏鍐典笅锛屾柊绫诲瀷鏄疧K銆傚鏋滄偍鏈夊叾浠栭渶瑕侊紝鍙互閫夋嫨椤甸潰绫诲瀷銆佸竷灞绛夛紝鐒跺悗鍗曞嚮鈥滃垱寤衡濇寜閽3銆佸垱寤烘柊缃戦〉鍚庯紝鍗曞嚮鈥滆璁♀濋〉涓婄殑鈥滄彃鍏-琛ㄥ崟-閫夋嫨锛堝垪琛/鑿滃崟锛夆濅互鎻掑叆鍙夋嫨鐨勪笅鎷夎〃鍗曘4銆佹垨鑰呭湪鑿滃崟鏍涓嬫湁涓涓〃鍗曢夐」鍥炬爣銆傚皢榧犳爣鏀惧湪...
绛旓細鐢╟ss鎶婃寜閽紕鎴愪笅鍒楄〃鐨勬牱寮忥紝鐢ㄤ竴涓簨浠讹紝鎸変笅鏃讹紝璋冪敤涓涓樉绀篸iv鐨勬牱寮忥紝div閲岄潰锛屾槸涓涓湡姝ｇ殑涓嬫媺妗嗐傘傘俤iv寮瑰嚭鏃惰缃綅缃椂锛岀洊浣忔寜閽嵆鍙
绛旓細.nav ul li ul li a{display:block;width:100px;height:30px;line-height:30px; background:#F30;color:#fff; text-align:left}/*瀛鑿滃崟鏍峰紡width鏄搴 height鏄珮搴 line-height璺熼珮搴﹀间竴鑷 background鏄儗鏅壊 color 鏄瓧浣撹壊 text-align鏄瓧浣撳眳涓*/ ...
