Début menu

dabblet.css

/* Début menu */
.menu-horiz
{
 margin: 10px 0 0 0;
 white-space:nowrap;
 line-height: 25px;
 background: #ddd4be;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 position: relative;
 font-family: Arial, Verdana, sans-serif;
 list-style: none;
 padding: 0;
}
.texte-souligne:hover
{
 text-decoration: underline
}
.menu-horiz > li {
 display:inline-block;
 vertical-align:top;
}
.menu-horiz  li
{
 padding: 0;height:25px;
 position: relative;
}
.menu-horiz li:hover, .menu-horiz li.onhover
{
 background: #ddd4be;
}
ul.menu-horiz a
{
 padding: 0 30px;
 line-height: 25px;
 font-size: 14px;
 color: black;
 display: inline-block;
 width:100%;
 box-sizing: border-box;
 outline: 0;
 text-decoration: none;
 cursor: pointer;
}
.menu-horiz h3, h4
{
 margin: 0;
 font-size: 14px;
}

.menu-horiz > li::after
{
content:'\00A0';
 border-left: 2px solid #aaa;
 height: 19px;
 display:inline-block;
 vertical-align:middle;
 position:relative;
 z-index:1;
}
ul.menu-horiz ul
{

 width: 175px;
 position: absolute;
 top: -9999px;
 border: 1px solid #000;
 background: #ece3d4;
 list-style: none;
 margin: 0;
 padding: 0 1px 5px 0;
}
ul.menu-horiz ul ul
{
display:inline-block;
 width: auto;
 _width: 610px;
}
.menu-horiz li li
{
 white-space: nowrap;
 height: 26px;
}
.menu-horiz li li:hover, .menu-horiz li li.onhover
{
 background: #f7f7f7;
}
.menu-horiz ul a
{
 padding: 0 20px;
 line-height: 26px;
 font-size: 14px;
 color: black;
 font-family: Arial, Verdana, sans-serif;
}
.menu-horiz ul a:hover
{
 color: black;
}
.menu-horiz li:hover ul, .menu-horiz li.onhover ul
{
 top: auto;
}
.menu-horiz ul ul
{
 border-top: 1px solid black;
}
.menu-horiz li:hover ul ul, .menu-horiz li:hover ul ul ul, .menu-horiz li:hover ul ul ul ul,
.menu-horiz li.onhover ul ul, .menu-horiz li.onhover ul ul ul, .menu-horiz li.onhover ul ul ul ul
{


 top:-9999px;
}
.menu-horiz li li:hover ul, .menu-horiz li li li:hover ul, .menu-horiz li li li li:hover ul,
.menu-horiz li li.onhover ul, .menu-horiz li li li.onhover ul, .menu-horiz li li li li.onhover ul
{
 
 top:0;
}
.menu-ombre
{
 box-shadow: 6px 6px 6px grey
}
.menu-horiz ul
{
 border-radius: 0px 0px 4px 4px;
 box-shadow: 6px 6px 6px grey
}
/* Fin menu */
.menu-horiz > li > a { padding:0 2.5em }
h3:first-letter {color:red;}

/* EN SUS */
p {display:table;margin:1em auto;font-size:150%;direction:ltr;max-width:80%;}
p span {display:inline-block;cursor:pointer;padding:2px 0.5em;
border-radius:5px;border:solid 1px;background:linear-gradient(-20deg,#456,#cde);
box-shadow:0 0 5px #333;text-shadow:1px 1px 1px #ddd;
}
p span:hover {display:inline-block;cursor:pointer;padding:2px 0.5em;
border-radius:5px;border:solid 1px;background:linear-gradient(160deg,#456,#cde);

dabblet.html

<nav>
<ul class="menu-horiz menu-ombre">
    
    <li><a href="/index.html">Titre-1</span></a></li>
    <li><a class="fleche">Titre-2</a>
        <ul>
        <li><a href="#" title="Bla bla"><h3><span class="sous-menu-prem-lettre">A</span>bcd</h3></a></li>
        <li><a href="#" title="Bla bla"><h3><span class="sous-menu-prem-lettre">E</span>fgh</h3></a></li>
        <li><a href="#" title="Bla bla" class="fleche"><h3><span class="sous-menu-prem-lettre">I</span>jkl</h3></a>
            <ul>
            <li><a href="#" title="Bla bla"><h3><span class="sous-menu-prem-lettre">A</span>bcd</h3></a></li>
            <li><a href="#" title="Bla bla"><h3><span class="sous-menu-prem-lettre">E</span>fgh</h3></a></li>
            </ul>
        </li>
        <li><a href="#" title="Bla bla" class="fleche"><h3>Abcd</h3></a>
            <ul>
            <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
            <li><a href="#" title="Bla bla"><h3>Efgh</h3></a></li>
            </ul>
        </li>
        <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
        <li><a href="#" title="Bla bla" class="fleche"><h3>Efgh</h3></a>
            <ul>
            <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
            <li><a href="#" title="Bla bla"><h3>Efgh</h3></a></li>
            </ul>
        </li>
        <li><a href="#" title="Bla bla"><h3><span class="sous-menu-prem-lettre">A</span>bcd</h3></a></li>
        </ul>
    </li>
    <li><a class="fleche">Titre-3</a>
        <ul>
        <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
        <li><a href="#" title="Bla bla"><h3>Efgh</h3></a></li>
        <li><a href="#" title="Bla bla" class="fleche"><h3>Ijkl</h3></a>
            <ul>
            <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
            <li><a href="#" title="Bla bla"><h3>Efgh</h3></a></li>
            </ul>
        </li>
        <li><a href="#" title="Bla bla" class="fleche"><h3>Abcd</h3></a>
            <ul>
            <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
            <li><a href="#" title="Bla bla"><h3>Efgh</h3></a></li>
            </ul>
        </li>
        <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
        <li><a href="#" title="Bla bla" class="fleche"><h3>Efgh</h3></a>
            <ul>
            <li><a href="#" title="Bla bla"><h3>A>bcd</h3></a></li>
            <li><a href="#" title="Bla bla"><h3>E>fgh</h3></a></li>
            </ul>
        </li>
        <li><a href="#" title="Bla bla"><h3>Abcd</h3></a></li>
        </ul>
    </li>
</ul>
</nav>
<p>Et si votre page avait un sens d'ecriture ou affichage different ? Votre menu serait-il encore utilisable ?</p>
<p>Pour le tester cliquer sur l'un ou l'autre pour modifier le sens d'affichage
<span onclick="window.document.body.style.direction='rtl';">RTL</span> ou 
<span onclick="window.document.body.style.direction='ltr';">LTR</span>
</p>
<p>De fait un <code>top:-9999px</code> est alors préférable au  <code>left:-9999px;</code> classique, <em>Non ?</em></p>
<p>Les pseudo<code>::before</code> et <code>::after</code> suivent aussi le sens d'affichage, idéal pour cette bordure au coté du li :) </p>
<p>D'autant que le caractere insecable <code>&amp;nbsp;</code> peut-etre genere avec : <code>content:'\00A0';</code>, 
un <code>padding</code> judicieusement le fait aussi sans forcer une pause dans un lecteur</p>  

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}