Bonjour,

je m'occupe d'un menu. Si un champ du menu comporte un sous-menu, je lui applique une pseudo-classe after ou before pour signaler la présence du sous-menu. Quand je survole un des items du menu, celui-ci est souligné mais pas la flèche de la pseudo-classe. Mon souci avec mon code :

<ul class="menu">
	<li class="plus"><a  href="#"><span>menu1</span></a>
		<ul>
 
 
			<li><a href="#"><span>smenu1</span></a></li>
			<li><a href="#"><span>smenu2</span></a></li>
			<li class="plus"><a   href="#"><span>smenu3</span></a>
				<ul>
					<li><a href="#"><span >ssmenu1</span></a></li>
					<li><a href="#"><span >ssmenu2</span></a></li>
				</ul>
			</li>
		</ul
	</li>
	<li><a  href="#" ><span>menu2</span></a></li>
</ul>

.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:4em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
  position : relative;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.8em;
}
.menu li {
  width:5em;
  height:2em;
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
	text-decoration:underline;
}
.menu li:hover > ul,.menu li:hover > ul li:hover > ul{
  display: block;
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF; /* ça y était pas lundi 25 */
  border:solid 1px #48B;/* ça y était pas lundi 25 */
}
/* position et dimension des sous menus */

.menu ul li {	
  margin:0;
  width:5em;
  height:2em:
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}

li {float:left;}

li a {
  text-decoration:none;
}
.menu li:hover > a {
	text-decoration:underline;
}
/* indicateur de présence d'un sous menu */
li.plus:before{
  content: "\25BA";
  float:right;
  color:#ABC;
}

est que la flèche est positionnée sur le coin supérieur droit de l'élément html auquel elle se rapporte et pas moyen de la descendre (la propriété top n'a aucun effet). Comment puis-je faire ?

Salut,

Pour souligner la flèche et pour l'aligner avec le lien, le plus simple à partir de ton code est d'ajouter la flèche dans le lien plutôt que de l'afficher dans le li.
On peut également utiliser :after à la place de :before pour placer la flèche directement au bon endroit (après le lien).

Donc en partant de ton code, il suffit de remplacer :

/* indicateur de présence d'un sous menu */
li.plus:before{
  content: "\25BA";
  float:right;
  color:#ABC;
}

par :

/* indicateur de présence d'un sous menu */
li.plus a:after{
  content: "\25BA";
  color:#ABC;
}

Bonne journée