当鼠标按顺序悬停在菜单上时，可在同一位置显示不同的页面

当鼠标按顺序悬停在菜单上时，可在同一位置显示不同的页面

作者：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 */#p#分页标题#e#
.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添加表格，. 其他浏览器不会用到表格，而将正常使用无序列表。文档类型声明是必须要加的，反之不能正常工作。

运行代码框
<!DOCTYPE <a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.0 Strict//EN" "http://www.w3.org/TR/x<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1/DTD/x<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1-strict.dtd"> <<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.5ibk.cn/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" <a href="http://www.5ibk.cn/bkhtml/c21/" title="XML教程">XML</a>:lang="en"> <head> <meta http-equiv="Content-Type" content="text/<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=utf-8"/> <title> stu nicholls | <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a> PLaY | cross browser tabbed pages with embeded links</title> <meta name="Author" content="Stu Nicholls"/> <meta name="Key<a href="http://www.5ibk.cn/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>play, <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a> play, Cascading, Style, Sheets, <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>1, <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>2, <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>, X<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a> mouseover, mouseovers, <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a> experiments, <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a> demonstrations"/> <meta name="Description" content="<a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a> ~ Cutting edge Cascading Style Sheets. Experiments in <a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>"/> <link rel="stylesheet" media="all" type="text/<a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>" href="http://www.forest53.com/tutorials/onepage/one_page.<a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>"/> <style type="text/<a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>"> body {text-align:center; font-family:verdana, arial, sans-serif; font-size:76%; color:#000; background:#fff url(back.gif) repeat-x; padding:0; border:0; margin:0;} </style>   </head> <body> <div class="menu" style="margin: 10px auto;"> <ul> <li><a class="hide" href="#nogo">John Constable</a>  <ul> <li> <p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p> <img src="/constable.jpg" alt="The Hay Wain" title="The Hay Wain"/> <p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p> <p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p> <p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p> <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The WebMuseum, Paris</a></p> </li> </ul>  </li> <li><a class="hide" href="#nogo">Claude Monet</a>  <ul> <li> <p>His youth was spent in Le Havre, where he first <a href="http://www.5ibk.cn/bkhtml/c118/" title="Excel教程">Excel</a>led as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p> <img src="/monet.jpg" alt="Women in the Garden" title="Women in the Garden"/> <p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p> <p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p> <p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p> <p><a href="http://www.ibiblio.org/wm/paint/auth/courbet/">Courbet</a> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p> <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The WebMuseum, Paris</a></p> </li> </ul>  </li> <li><a class="hide" href="#nogo">Vincent Van Gogh</a>  <ul> <li> <p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p> <img src="/vincent.jpg" alt="The Starry Night" title="The Starry Night"/> <p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">Cézanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The Starry Night</a> (1889).</p> <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The WebMuseum, Paris</a></p> </li> </ul>  </li> </ul> <div class="clear"> </div> </div> </body> </<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>#p#分页标题#e#
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]