Adaptation d'un menu déroulant sans script pour ie8

Bonjour,

Si nouveau sur le forum, je ne le suis pas sur le site qui est l'une de mes références depuis de longues années.
J'ai un site en ligne depuis 1998 que je fais évoluer régulièrement avec mes petites compétences et l'aide que l'on me donne sur le net. Sachant que je ne veux pas être tributaire d'un Bootstrap, d'un Wordpress ou toute autre chose qui sont des usines à gaz comparativement à mes besoins.

Bref, voici mon problème. J'essaye de rendre mon site plus agréable à consulter sur les périphériques mobiles et j'ai un souci sur un menu déroulant à 1 niveau qui sous IE8 a un aspect indésirable et indésiré. Il fonctionne mais graphiquement, ce n'est pas terrible.
Ce menu n'est pas de ma confection, mais une adaptation d'un existant. Vous pouvez le voir en action sur cette page de test :
http://www.desurynet.com/test/origitxt.htm

Sous IE8 cela donne cela :
http://www.desurynet.com/horsdn/ScreenShot045.jpg

Le code html :

<header><!-- En tête Logo gauche navigation Google search -->
	<nav id="navhead">
		<!-- En tête Logo gauche -->
		<div class="dnlogo"><a href="index.htm"></a></div>
		<!-- Menu navigation -->  
        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">          
				<li><a href="origitxt.htm" title="Origines de la famille, arbre généalogique, focus sur quelques personnages, etc.">origines</a>
				</li>
                <li>
					<!-- First Tier Drop Down -->
					<label for="drop-1" class="toggle">orfèvres +</label>
					<a href="#" title="La dynastie des orfèvres Desury, leurs travaux et poinçons">orfèvres <img src="images/downArrow2.png" /></a>
					<input type="checkbox" id="drop-1"/>
                <ul>
			<li><a href="romrealisation.htm" title="Evocation de l'orfèvrerie du XVIIIe à travers l'histoire de Romain Desury">romain</a></li>
			<li><a href="mariehiprealisation.htm" title="Biographie et travaux d'orfèvrerie réalisés par Marie Hippolyte Desury">marie hippolyte</a></li>
			<li><a href="augusterealisation.htm" title="Biographie et travaux d'orfèvrerie réalisés par Auguste Desury">auguste</a></li>
			<li><a href="hipaulrealisation.htm" title="Biographie et travaux d'orfèvrerie réalisés par Hippolyte Paul Desury">hippolyte paul</a></li>
			<li><a href="hipmarierealisation.htm" title="Biographie et travaux d'orfèvrerie réalisés par Hippolyte Marie Desury">hippolyte marie</a></li>
			<li><a href="reneabc.htm" title="Biographie et travaux d'orfèvrerie réalisés par René Desury">rené</a></li>
			<li><a href="travaux%20comun.htm" title="Les oeuvres réalisées ne pouvant être attribuées spécifiquement à l'un de nos orfèvres">inventaire</a></li>
			<li><a href="poincon.htm" title="Les poinçons des ateliers Desury">poinçons</a></li>
			<li><a href="cartographieUmap.htm" title="Carte des travaux d'orfèvrerie répertoriés en Bretagne et environs">cartographie</a></li>      
                </ul></li>
				<li>
					<!-- First Tier Drop Down -->
					<label for="drop-2" class="toggle">orfèvrerie +</label>
					<a href="#" title="Les techniques, l'outillage et la communication commerciale des ateliers Desury">orfèvrerie <img src="images/downArrow2.png" /></a>
					<input type="checkbox" id="drop-2"/>
                <ul>	
             <li><a href="techniquesconception.htm" title="De la conception aux finitions : Les techniques utilisées en orfèvrerie">techniques</a></li>
             <li><a href="outillage.htm" title="Les outils de l'orfèvrerie Desury">outillage</a></li>
             <li><a href="comerce.htm" title="Eléments de la communication commerciale de l'orfèvrerie Desury">communication</a></li>
             <li><a href="maison%20desury%20txt.htm" title="Petite histoire de l'immeuble Desury, rue Charbonnerie, à Saint-Brieuc">bâtiment</a></li>
				</ul></li>
				<li>
					<!-- First Tier Drop Down -->
					<label for="drop-3" class="toggle">divers +</label>
					<a href="#" title="Liens, références, contact et plan">divers <img src="images/downArrow2.png" /></a>
					<input type="checkbox" id="drop-3"/>
                <ul>	
             <li><a href="liens.htm" title="Liens, les références">ressources</a></li>
             <li><a href="formulaire.htm" title="Me contacter par mail">contact</a></li>
             <li><a href="plansite.htm">plan du site</a></li>
				</ul></li>
				<li style="background-color:#f0f0f0;"><a href="index.htm" title="Les dernières mises à jour sur desury net">
			 <img src="images/icone home.png" /></a></li>
		</ul>		
        </nav>
</header><!-- #En tête Logo navigation Google Search -->

Le CSS :

.toggle,
[id^=drop] {
	display: none;
}
nav a:link {color:#ffffff;text-decoration:none;}
nav a:visited {color:#fff;text-decoration:none;}
nav a:hover {color:#88b313;text-decoration:none;}
/* Giving a background-color to the nav container. */
nav {
	margin:0 2em 1.5em 0;
	padding:4em 0 0 0;
	background-color: #f0f0f0;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;	
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:relative" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	z-index:10;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #484848;
	}
	
nav ul > li > .parent {
    background-image: url("images/downArrow2.png");
    background-repeat: no-repeat;
    background-position: right;	
}

/* Styling the links */
nav a {
	display:block;
	padding:0px 15px 0px 15px;	
	color:#FFF;
	font-size:20px;
	line-height: 45px;
	text-decoration:none;
}

nav ul li ul li a {font-size:15px;padding:0px 0px 0px 15px;}

/*
nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
	background-color:transparent; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 45px; 	
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;	
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:155px;
	float:none;
	display:list-item;
	position: relative;	
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:155px;	
}
	
/* Change ' +' in order to change the Dropdown symbol 
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; } */


/* Media Queries
--------------------------------------------- */

@media screen and (max-width : 768px) {
	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;	
	}

	/* Stylinf the toggle label */
	.toggle {
		display: block;
		background-color: #484848;
		padding:0 20px;	
		color:#FFF;
		font-size:20px;
		line-height: 60px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul {
		display: block;
		width: 100%;
		}
	
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}

	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		width: 100%;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 
	}
}

@media screen and (max-width : 480px) {

nav ul{
	float:none;
	width:100%;
	padding:0;
	margin:-0.5em 0 0 0;
	list-style: none;
	position: relative;
	z-index:10;
	}
}

J'espère avoir donné tous les éléments nécessaires à votre aide éclairée !
Modifié par roxym (01 Sep 2015 - 11:41)