1
Wie der Titel schon sagt, ich eine große Lücke in meinem Menü bekam, die in Chrome auftritt, aber nicht in Firefox:Gap zwischen UL und seine Mutter LI in Chrome
EDIT 
body {color:#333;
background:#2c2c2c;
margin-right: auto;
margin-left: auto;
width: 1200px;
font-size:75%;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}
h1,h2 {font-weight: normal; color:#38D2F3;}
h1 {font-size:1.5em; margin-bottom: 0.5em;}
h2 {font-size: 1.2em; margin-bottom: 0.75em;}
p {color: white}
.container {
position:absolute;
width:1150px;
height: 100%;
}
#page {
height:100%;
}
#header{
padding: 10 10 0 10;
width: 1150px;
height: 50px;
background-color: #9AC0CD;
}
#navigation{
position: inherit;
margin-top: 20px;
width: 200px;
height: 500px;
background-color: #2c2c2c;
}
ul.nav hr{
width: 90%;
height: 1px;
margin: 0px 0px 0px 10px;
border: none;
background: white;
}
ul.nav{
list-style-type: none;
margin: 5px 5px 5px 5px;
background: #2c2c2c;
border-style: solid;
border-top-left-radius: 15px;
border-color: gray;
border-width: 1px;
padding:0;
}
li.nav{
position: relative;
}
li.nav a, li.nav-last a, li.nav-first a{
display: block;
height: 30px;
text-decoration: none;
text-indent: 10px;
padding: 10px 0px 0px 5px;
color: white;
position: relative;
}
li.nav-last a{
border: none;
}
li.nav:hover a, li.nav-last:hover a, li.nav-first:hover a{
background-color: black;
font-weight: bold;
}
li.nav-first:hover a{
border-top-left-radius: 15px;
}
ul.sub-nav li.sub-nav a {
background-color: #2c2c2c;
}
ul.sub-nav li.sub-nav:hover a {
background-color: gray;
border-radius: 0px;
}
li.nav ul.sub-nav,li.nav-first ul.sub-nav,li.nav-last ul.sub-nav{
display: none;
list-style-type: none;
left: 188px;
top:0px;
width: 120px;
padding: 0;
position: absolute;
border-style: solid;
border-color: gray;
border-width: 1px;
background: #2c2c2c;
z-index: 10;
}
li.nav:hover ul.sub-nav, li.nav-first:hover ul.sub-nav, li.nav-last:hover ul.sub-nav {
display: block;
float: right;
}
#content{
position: absolute;
margin-left: 230px;
}
p {
text-align: justify;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="./script/main.js"></script>
</head>
<body id="page">
\t <div class="container">
\t \t <div id="header">HEADER</div>
\t \t <div id="navigation">
\t \t \t <ul class="nav">
\t \t \t \t <li class="nav-first"><a href="#">Eintrag 1</a>
<ul class="sub-nav">
<li class="sub-nav"><a href="#">Untereinstrag 1</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 2</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 3</a></li>
</ul>
<hr />
</li>
\t \t \t \t <li class="nav"><a href="#">Eintrag 2</a>
<ul class="sub-nav">
<li class="sub-nav"><a href="#">Untereinstrag 1</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 2</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 3</a></li>
</ul>
<hr />
</li>
\t \t \t \t <li class="nav"><a href="#">Eintrag 3</a>
<ul class="sub-nav">
<li class="sub-nav"><a href="#">Untereinstrag 1</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 2</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 3</a></li>
</ul>
<hr />
</li>
\t \t \t \t <li class="nav"><a href="#">Eintrag 4</a>
<ul class="sub-nav">
<li class="sub-nav"><a href="#">Untereinstrag 1</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 2</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 3</a></li>
</ul>
<hr />
</li>
\t \t \t \t <li class="nav"><a href="#">Eintrag 5</a>
<ul class="sub-nav">
<li class="sub-nav"><a href="#">Untereinstrag 1</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 2</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 3</a></li>
</ul>
<hr />
</li>
\t \t \t \t <li class="nav"><a href="#">Eintrag 6</a>
<ul class="sub-nav">
<li class="sub-nav"><a href="#">Untereinstrag 1</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 2</a></li>
<li class="sub-nav"><a href="#">Untereinstrag 3</a></li>
</ul>
<hr />
</li>
\t \t \t \t <li class="nav-last"><a href="#">Eintrag 7</a></li>
\t \t \t </ul>
\t \t </div>
\t \t <div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo</p>
\t \t </div>
\t </div>
\t
\t
</body>
</html>ich denke, es aufgrund der auftreten könnte "position: relative" aber nicht fou nd einen Workaround noch nicht. Hier
ist der CSS-Code
Ich kann nicht ernst meinen Kopf um, warum dies nicht funktioniert in Chrome (neueste Version)
Vielen Dank im Voraus.
das Problem, das auftritt, ist, dass das Untermenü wird eine absolute Position haben. Wenn ich zum zweiten Hauptmenüeintrag navigiere, wird das entsprechende Untermenü an der gleichen Position wie beim ersten Hauptmenüeintrag angezeigt und es sollte daneben angezeigt werden. Ich habe einen weiteren Screenshot für den zweiten Hauptmenüeintrag und das Untermenü hinzugefügt. – motaa
hast du eigentlich recht aber jetzt habe ich eine leichte Überlappung vom Untermenü aber nur für den ersten Hauptmenüeintrag. Ich habe das Snipplet bearbeitet. – motaa
Das ist, weil Sie 'Position: relativ' zu allen' li's hinzufügen müssen, sehen Sie mein Arbeitsbeispiel: https://jsfiddle.net/azizn/fbh9fuma/ - Ich benutzte den Selektor 'ul.nav li {position : relativ; } ' – Aziz