URL: https://linuxfr.org/forums/programmationweb/posts/probl%C3%A8me-de-click-de-souris-css-purspan-et-a
Title: problème de click de souris /css pur/span et a
Authors: ojingo
Date: 2004年08月21日T03:15:10+02:00
Tags: 
Score: 0
Salut, 
Je veux faire un menu à 2 niveaux en ligne, en visu, quand on 'hover' sur "Choix2", ça donne ça: 
 
Choix1 Choix2 Choix3 Choix4 
Choix2.1 Choix2.2 Choix2.2 Choix2.2 
 
Ma stucture a deux pseudo-classes: menu et ssmenu. 
 
Le souci, quand je clique sur les choix du sous-menu (un lien hypertexte en fait), je n'ai pas accès à la page alors qu'elle est détectée en bas à gauche de mon navigateur. Sinon tout marche. 
 
2 précisions: 
1. Je tourne sur un mozilla:Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.0.0) Gecko/20020623 Debian/1.0.0-0.woody.1 
 
2. Bizarrement je dois spécifier la classe "ssmenu" aux liens hypertexte du sous menu sinon ceux-ci héritent des propriétés de ceux du menu. J'ai cru comprendre que l'imbrication d'un <a ...> dans un donnait de facto l'héritage correct si l'on déclare ssmenu.span a {...}. Qu'en est-il? Merci de voir ce problème car je ne l'ai trouvé nulle part sur le web. 
 
 
Ci-joint le code css: 
 
/*MENU*/ 
ul.menu { 
float: left; 
position: relative; 
top: 0em; 
left: 2em; 
margin: 0em; 
padding: 0em; 
} 
ul.menu li{ 
float: left; 
display: inline; 
list-style-type: none; 
margin: 0em; 
padding:0em 1.5em 0.8em 1.5em; 
} 
ul.menu li a { 
text-decoration: none; 
font-size: 1.5em; 
color: #000000; 
} 
ul.menu li a:hover { 
color: #ff0000; 
} 
 
/*SOUS-MENU*/ 
span.ssmenu { 
display: none; 
} 
ul.menu li:hover span.ssmenu { 
float: left; 
position: absolute; 
top: 2em; 
left: 0em; 
display: inline; 
list-style-type: none; 
margin: 0em; 
padding:0em 1.5em 1em 1em; 
border-top: 1px solid black; 
width: 70em; 
} 
span.ssmenu a.ssmenu { 
padding:1em 1em 1em 1em; 
text-decoration: none; 
font-size: 1em; 
color: #000000; 
} 
span.ssmenu a.ssmenu:hover { 
color: #ff0000; 
} 
 
et le code html: 
NB: les parenthèses remplacent le <> pour que vous puissiez voir le code. 
 
(div class="container") 
(ul class="menu") 
(li)(a href="#")Choix1(/a) 
(/li) 
(li)(a href="#")Choix2(/a) 
(span class="ssmenu") 
(a class="ssmenu" href="#")Choix2.1(/a) 
(a class="ssmenu" href="#")Choix2.2(/a) 
(a class="ssmenu" href="#")Choix2.3(/a) 
(a class="ssmenu" href="#")Choix2.4(/a) 
(/span) 
(/li) 
(li)(a href="#")Choix3(/a) 
(span class="ssmenu") 
(a class="ssmenu" href="#")Choix3.1(/a) 
(a class="ssmenu" href="#")Choix3.2(/a) 
(a class="ssmenu" href="#")Choix3.3(/a) 
(a class="ssmenu" href="#")Choix3.4(/a) 
(a class="ssmenu" href="#")Choix3.5(/a) 
(/span) 
(/li) 
(/ul) 
(/div)
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/forums/programmationweb/posts/probl%C3%A8me-de-click-de-souris-css-purspan-et-a.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/forums/programmationweb/posts/probl%C3%A8me-de-click-de-souris-css-purspan-et-a.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>