当鼠标按顺序悬停在菜单上时,可在同一位置显示不同的页面 作者:Stu Nicholls 翻译:forestgan 信息 这是 cssplay的站长根据其最近创作的dropdown and flyout menus而改编而成的,当鼠标按顺序悬停在菜单上时,可在同一位置显示不同的页面,可在Opera, IE5.5, IE6, IE7 beta,Safari 1.3.2 & Firefox.中正确显示和工作,不兼容Mac IE5。 鼠标悬停在菜单和页面上时显示文字与图片以及链接,滚动条要加在每个页上。 样式 对于非IE浏览器来说是比较简单的,只用一个样式表。 /* common styling */ /* set up the overall width of the menu div, the font and the margins with a relative position*/ .menu { font-family: verdana, arial, sans-serif; width:750px; margin:0; position:relative; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0; margin:0; list-style-type: none; border:0; } /* float the list so that the items are in a line */ .menu ul li { float:left; } /* style the links to be 249px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:249px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the first list item */ .menu ul li:hover ul { text-align:left; display:block; position:absolute; top:30px; left:0; text-align:left; } /* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */ .menu ul li:hover ul li { background:#eee; color:#000; padding:10px; width:689px; height:180px; overflow:auto; border:20px solid #b3ab79; } /*float the image left with padding and no border */ .menu ul li:hover ul li img { float:left; padding:10px 10px 10px 0; border:0; } /* style the paragraph font height */ .menu ul li:hover ul li p { font-size:0.9em; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:inline; background:#eee; color:#c00; text-decoration:underline; border:0; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { text-decoration:none; color:#000; } 而IE还需要专门为它加一个,用条件判断加入。 /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the first list item */ .menu ul li a:hover ul { text-align:left; display:block; position:absolute; top:31px; left:0; } /* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */ .menu ul li a:hover ul li { background:#eee; color:#000; padding:10px; width:746px; height:240px; overflow:auto; border:20px solid #b3ab79; w\idth:689px; he\ight:180px; } /*float the image left with padding and no border */ .menu ul li a:hover li img { float:left; padding:10px 10px 10px 0; border:0; } /* style the paragraph font height */ .menu ul li a:hover p { font-size:0.7em; f\ont-size:1em; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { display:inline; width:1px; word-wrap:normal; background:#eee; color:#c00; text-decoration:underline; border:0; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { text-decoration:none; color:#000; } xhtml 你会看到用条件判断来给 IE添加表格,. 其他浏览器不会用到表格,而将正常使用无序列表。文档类型声明是必须要加的,反之不能正常工作。 运行代码框 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 11:28 , Processed in 0.176256 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.