dl ol application analysis_experience exchange

Title: Exercises of dl ol
Author: Aoao

Last time li simulated dl~dl didn’t know what to do~I asked ol to make a compound list together~

This exercise In addition to css~ I also used some JS
Let’s take a look at the ugly demo first because I have been too lazy recently to make beautiful styles

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Learning dl</title> <style type="text/css"> dl* { margin: 0; padding: 0; font-size:12px; } dl { width: 405px; height:128px; border:1px #000 solid; } dt { width:120px; height: 32px; line-height: 32px; text-align: center; } dt { display: block; text-decoration: none; } dt.ing a { background:#efefef; } dd { position: absolute; display: none; width:280px; background-color: #fff; } ddli { line-height: 16px; list-style-type: none; text-align:right; color:#999; } dd li a { float:left; display:inline; padding-left:5px; } dd.ing { display: block; } dd.no { display:none; } dd#d1 { margin-top:-32px; margin-left:120px; } dd#d2 { margin-top:-64px; margin-left:120px; } dd#d3 { margin-top:-96px; margin-left:120px; } dd#d4 { margin-top:-128px; margin-left:120px; } </style> <script type="text/javascript"> var ddiShow=2; function show(iShow) { document.getElementById(['d'+ddiShow]).className="no"; document.getElementById(['t'+ddiShow]).className="no"; var iShow; ddiShow=iShow; document.getElementById(['d'+iShow]).className="ing"; document.getElementById(['t'+iShow]).className="ing"; return false; } </script><dl> <dt id="t1"><a href="#" onmouseover="return show('1');">Test menu one</a></dt> <dd id="d1"> <ol> <li> <a href="#">Test content (menu one)</a>1-24</li> <li> <a href="#">Test content (menu one)</a>1-24</li> <li> <a href="#">Test content (menu one)</a>1-24</li> <li> <a href="#">Test content (menu one)</a>1-24</li> <li> <a href="#">Test content (menu one)</a>1-24</li> <li> <a href="#">Test content (menu one)</a>1-24</li> <li> <a href="#">Test content (menu one)</a>1-24</li> <li> <a href="#">Test content (menu one)</a>1-24</li> </ol> </dd> <dt id="t2" class="ing"><a href="#" onmouseover="return show('2');">Test menu two</a></dt> <dd id="d2" class="ing"> <ol> <li> <a href="#">Test content (menu 2)</a>1-24</li> <li> <a href="#">Test content (menu 2)</a>1-24</li> <li> <a href="#">Test content (menu 2)</a>1-24</li> <li> <a href="#">Test content (menu 2)</a>1-24</li> <li> <a href="#">Test content (menu 2)</a>1-24</li> <li> <a href="#">Test content (menu 2)</a>1-24</li> <li> <a href="#">Test content (menu 2)</a>1-24</li> <li> <a href="#">Test content (menu 2)</a>1-24</li> </ol> </dd> <dt id="t3"><a href="#" onmouseover="return show('3');">Test menu three</a></dt> <dd id="d3"> <ol> <li> <a href="#">Test content (menu three)</a>1-24</li> <li> <a href="#">Test content (menu three)</a>1-24</li> <li> <a href="#">Test content (menu three)</a>1-24</li> <li> <a href="#">Test content (menu three)</a>1-24</li> <li> <a href="#">Test content (menu three)</a>1-24</li> <li> <a href="#">Test content (menu three)</a>1-24</li> <li> <a href="#">Test content (menu three)</a>1-24</li> <li> <a href="#">Test content (menu three)</a>1-24</li> </ol> </dd> <dt id="t4"><a href="#" onmouseover="return show('4');">Test menu four</a></dt> <dd id="d4"> <ol> <li> <a href="#">Test content (menu four)</a>1-24</li> <li> <a href="#">Test content (menu four)</a>1-24</li> <li> <a href="#">Test content (menu four)</a>1-24</li> <li> <a href="#">Test content (menu four)</a>1-24</li> <li> <a href="#">Test content (menu four)</a>1-24</li> <li> <a href="#">Test content (menu four)</a>1-24</li> <li> <a href="#">Test content (menu four)</a>1-24</li> <li> <a href="#">Test content (menu four)</a>1-24</li> </ol> </dd> </dl>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]

The key points of CSS

Copy code The code is as follows:

dt.ing a
{
background:#efefef;/*Moved background*/
}
dd
{
position: absolute;/*Stream DD*/
display: none;/*Hide DD by default*/