Module à onglets pur CSS

by vvv vvvv

HTML

<p>Module à onglets en pur CSS. Contenu uniquement consultable au survol du titre de l'onglet correspondant.</p>

<ul>
    
    <li>
        <h2>Un titre</h2>
        <p>Paragraphe numéro <em>un</em> correspondant à l'onglet “Un titre”. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </li>
    
    <li>
        <h2>Un autre</h2>
        <p>Paragraphe numéro <em>deux</em> correspondant à l'onglet “Un autre”. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </li>
    
    <li>
        <h2>Un dernier</h2>
        <p>Paragraphe numéro <em>trois</em> correspondant à l'onglet “Un dernier”. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </li>
    
</ul>

CSS

body {
  padding: 15px;
  font: 14px/1.4 "Lucida Grande", sans-serif;
}

ul {
    list-style-type: none;
    position: relative;
    margin: 20px 0 0;
    padding: 0;
    width: 600px;
}

li {
    float: left;
    border-bottom: 1px solid #99BB55;
}

li > h2 {
    padding: 0 5px;
    width: 110px;  height: 27px;
    
    font-size: 1.3em;
    line-height: 27px;
    color: #99BB55;
    
    cursor: pointer;
}

    li > h2:hover { background-color: #e6efcb; }

li p {
    display: none;
}

li:hover > h2 + p {
    position: absolute;
    top: 35px;  left: 0;
    display: block;
}

em { font-style: italic; }