建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
CSS
dl { position: absolute; width: 460px; height: 170px; border: 10px solid #eee; } dd { margin: 0; width: 460px; height: 170px; overflow: hidden; } dt { position: absolute; right: 1px; } ul { margin: 0; padding: 0; width: 460px; height: 170px; list-style: none; border: 1px solid #ccc; background: #FF9999; } li { width: 405px; height: 27px; padding-left: 20px; font: 12px/27px "宋体", sans-serif; white-space: nowrap; overflow: hidden; } dt a { display: block; margin: 1px; width: 80px; height: 56px; text-align: center; font: 700 12px/55px "宋体", sans-serif; color: #fff; text-decoration: none; background: #666; } dt a:hover { background: orange; } dd a { text-decoration: none; line-height: 36px; color: #000; }
-
HTML
<dl> <dt><a href="#a">军事新闻</a><a href="#b">财经资讯</a><a href="#c">娱乐资讯</a> </dt> <dd> <ul id="a"> <li><a href="#">军事新闻1</a> </li> <li><a href="#">军事新闻2</a> </li> <li><a href="#">军事新闻3</a> </li> <li><a href="#">军事新闻4</a> </li> <li><a href="#">more...</a> </li> </ul> <ul id="b"> <li><a href="#">财经资讯1</a></li> <li><a href="#">财经资讯2</a></li> <li><a href="#">财经资讯3</a></li> <li><a href="#">财经资讯4</a></li> <li><a href="#">more...</a> </li> </ul> <ul id="c"> <li><a href="#">娱乐资讯1</a> </li> <li><a href="#">娱乐资讯2</a> </li> <li><a href="#">娱乐资讯3</a> </li> <li><a href="#">娱乐资讯4</a> </li> <li><a href="#">more...</a> </li> </ul> </dd> </dl>