nicht angemeldet
Nach längerer Pause möchte ich HTML, insbesondere Navigation, auffrischen, bevor ich mit FlexBox bzw. Grid weitermache. Ich habe gerade ein Video von YouTube durchgearbeitet und habe das Problem, daß das erste Untermenü nicht an die gewünschte Stelle rückt. Dadurch erreiche ich auch die Untermenüs nicht. Habe mit dem Video sicher schon mehrmals verglichen aber finde keinen Fehler. Entweder übersehe ich etwas oder es liegt am Browser. Würde mir jemand kontrollieren wo der Fehler liegen könnte?
Arbeite mit Mac/Safari/Visual Studio Code Mit Visual Studio Code sehe ich gleichzeitig welche Wirkung eine Eingabe hat. An der Stelle, wo das Untermenü angepaßt wird, ändert sich nichts.
"https://www.youtube.com/watch?v=XDFyUPoak34"
<!--https://www.youtube.com/watch?v=XDFyUPoak34-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Dropdown.css">
<title>Document</title>
</head>
<body>
<div id="container">
<ul>
<li>Home</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Mobile App
<ul>
<li>iOS App</li>
<li>Android</li>
<li>Windows</li>
</ul>
</li>
<li>Advertising</li>
</ul>
</li>
<li>Blog</li>
<li>About US</li>
<li>Contact US</li>
</ul>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body {
background-color: #5D6D7E;
margin-left: 250px;
margin-top: 20px;
}
#container ul{
list-style: none;
margin-left: 25px;
margin-top: 20px;
}
#container ul li{
background-color: #8E44AD;
width: 150px;
border: 1px solid white;
border-radius: 26px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: white;
font-size: 19px;
position: relative;
}
#container ul li:hover {
background-color: #85C1E9;
}
#container ul ul {
display: none;
}
#container ul li:hover > ul {
display: block;
}
#container ul ul ul {
margin-left: 150px;
top: 0px;
position: absolute;
}
Rolf B
Matthias Scharwies
Gunnar Bittersmann
Der Martin