Home > Article > Web Front-end > dl ol application analysis_experience exchange

dl ol application analysis_experience exchange

WBOYOriginal: 2016-05-16 12:08:371720browse

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

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*/

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css conditional annotation theory and practice source file_experience exchangeNext article：css conditional annotation theory and practice source file_experience exchange

See more

dl ol application analysis_experience exchange

Related articles