Problem with CSS Layout - The position Property


#1

Hello!
I’ll be brief, I have a drop-down menu created in JavaScript in a nav tag. When the sub menus are visible, it is below my other tags and we do not see them. Can you help me?
HTML code

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>::TP2:: ::Mes Médias.TIM::</title>
		<meta charset="utf-8">
		<meta name="description" content="Description sommaire du contenue de cette page">
		<!-- normalize.css -->
		<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css">
		<!-- Style CSS -->
		<link rel="stylesheet" type="text/css" href="css/styles.css">
	</head>
	<body>
		<header>
			<h1>::TP2:: ::Mes Médias.TIM::</h1>
		</header>
		<nav id="menu">
			<!-- Fait en JS -->
 		<!--<ul>
				<li>Sites
					<ul>
						<li>jsLint</li>
						<li>w3c</li>
						<li>MDN</li>
						<li>w3schools</li>
					</ul>
				</li>
			</ul>
			<ul>
				<li>Endroits
					<ul>
						<li>Londres</li>
						<li>Paris</li>
						<li>Montréal</li>
						<li>NewYork</li>
					</ul>
				</li>
			</ul>
			<ul>
				<li>Images
					<ul>
						<li>Mao</li>
						<li>Jagger</li>
						<li>Marilyn</li>
					</ul>
				</li>
			</ul>
			<ul>
				<li>Sons
					<ul>
						<li>8_Year_Anniversary</li>
						<li>Dark_Cloak</li>
						<li>Hi_Q</li>
						<li>Hyperspeed</li>
						<li>Trophy_Wife</li>
					</ul>
				</li>
			</ul>-->
		</nav>
		<content>
			<div id="carte">
				<h3>::Vous êtes ici::</h3>
				<!-- Affichage de la carte -->
			</div>
			<div id="musique">
				<h3>::Musique::</h3>
				<audio id="lecteur1" src="medias/audios/8_Year_Anniversary.mp3" controls>
					<p>Votre navigateur ne supporte pas le lecteur audio...</p>
				</audio>
				<h4>Joue présentement :</h4>
				<select class="changerAudio" id="monselect">
					<option value="---" selected>---</option>
				</select>
			</div>
			<div id="images">
				<h3>::Images::</h3>
				<!-- Affichage de la carte -->
			</div>
			<section>
				section
			</section>
		</content>
		<footer>
			<p class="date"></p>
			<p class="horloge"></p>
		</footer>
		<!-- Programmation JS -->
		<script src="js/base.js"></script>
	</body>
</html>

CSS code

body{
    background-color: white;
    position: relative;
    margin: 0;
    height: 100%;
    width: 100%;
}
header, nav, content, footer{
    width: 100%;
}
header, footer{
    /*background-color: aqua;*/
    text-align: right;
}
header{
    height: 20%;
}
footer{
    height: 5%;
}
nav{
    /*background-color: chocolate;*/
    position: absolute;
    top: 125px;
    height: 5%;
}
content{
    /*background-color: aquamarine;*/
    display: block;
    position: relative;
    height: 70%;
}
div, section{
    /*background-color: lightblue;*/
    display: block;
    text-align: center;
}
header, nav, content, div, section, footer{
    background-color: darkblue;
    border: solid 3px gray;
    color: white;
}
#carte{
    height: 245px;
    width: 15%;
}
#musique{
    height: 150px;
    width: 15%;
/*    top: 505px;*/
}
#images{
    height: 238px;
    width: 15%;
/*    top: 660px;*/
}
section{
    position: absolute;
    height: 650px;
    width: 84.45%;
    top: 0px;
    right: 0px;
}
h1{
    padding-bottom: 5%;
    padding-right: 50px;
}
audio{
    width: 200px;
}
#musique h4{
    margin: 0;
}
footer p{
    display: inline;
    margin: 5px;
}
ul {
    margin-top: 8px;
    display: inline-grid;
    width: 150px;
    font: 1em sans-serif;
    list-style-type: none;
}
ul.topMenu {
    float: left;
}
ul li li {
    border-bottom: none;
    height: 0;    /*Cacher liste*/
    opacity: 0;   /*Cacher liste*/
    transition: height 1s, opacity 1s;
}
ul li:hover ul li {
    height: 30px;
    transition: height 1s, opacity 2s;
    opacity: 1;
             
}
li{
    display: block;
    text-decoration: none;
    padding: 5px 7px;
    color: white;
}
            
li:hover {
    background-color: blue;
}

I thank you in advance!


#2

On first glance this strikes one as not being very search engine friendly. It rings of eye candy that should be left to CSS, not raw text.

<html>
<head>
<style>
h1 b:before,
h1 b:after {
  content: "::";
}
</style>
</head>
<body>
<h1><b>TP2</b> <b>Mes Médias.TIM</b></h1>
</body>
</html>

Now select and copy the text. Notice that when you paste it there are no colons? That means search engines don’t see them, either.

I would like to request that you edit your post to use two space characters for indentation as opposed to tabs. It makes the code unruly and difficult to span, as it is. That’s where I fall out.