user3182532 user3182532 - 3 years ago 29
HTML Question

HTML positioning: can't get it right

I have created a fiddle:

https://jsfiddle.net/14f5jro7/

Question: Why does the submenu of "Familien" (hover over it to see it) not appear below but shifted to the right?

Blabla: I'm trying since hours to build a proper menu and according to the tutorials that I've read the parent should be position = relative and the child position = absolute. Then I can use top and left. That's what I tried to do and I don't know why it fails.

HTML:

<body>
<div id="header">
</div>

<div id="menu">
<ul>
<li>
<a href="#">Familien</a>
<div class="sub-menu">
<ul>
<li><a href="#">Familie editieren</a></li>
</ul>
</div>
</li>
<li><a href="#">Patienten</a></li>
<li><a href="#">Materialien</a></li>
<li><a href="#">Proben</a></li>
</ul>
</div>
<div id="main">
<h1>
Welcome to biobank v1.0
</h1>
</div>
<div id="footer">footer</div>
</body>


CSS:

#menu ul {
list-style-type: none
}


#menu li {
display: inline-block;
padding:10px 10px;
margin: 5px;
border-radius: 10px;
border-top:3px solid #777777;
border-right:3px solid #333333;
border-bottom:3px solid #444444;
border-left:3px solid #777777;
background: #eee;
position: relative;
}




.sub-menu {
left:0%;
top: 100%;
z-index: -1;
position:absolute;
}

#menu > ul > li:hover .sub-menu {
z-index: 1;
}

#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}


#menu {
float: left;
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;

}


#footer {
float: left;
width: 100%;
background-color: white;
}

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}


EDIT: I found my own solution, inspired by these answers and further research. Here it is, hopefully it helps other:

/* body */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}



/* header */
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}


/* menu */

#menu {
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}


#menu * {
display: inline-block
}


#menu ul {
list-style-type: none;
}


#menu li {
padding:10px 10px;
border-radius: 10px;
border-top:3px solid #777777;
border-right:3px solid #333333;
border-bottom:3px solid #444444;
border-left:3px solid #777777;
background: #eee;
}

#menu > ul > li {
position: relative;
}



.sub-menu {
padding:0;
left:0%; /* ignores border of parent, manual adjustment after placement needed!!*/
margin-left: -3px; /* gotta be behind left:0 !!!!*/
top: 100%;
margin-top: 3px;
z-index: -1;
position:absolute;
}

#menu > ul > li:hover .sub-menu {
z-index: 1;
}




/* main */
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;

}


/* footer */
#footer {
float: left;
width: 100%;
background-color: white;
}

Answer Source

The ul inner .sub-menu have a padding-left.

This will change to the left:

.sub-menu ul {
  padding: 0;
  margin:0;
}
#menu .sub-menu ul li {
  margin: 0;
}

And change the left value to -3px by the edges you put

Here, you updated your code. Regards

#menu ul {
list-style-type: none
}


#menu li {
    display: inline-block;
    padding:10px 10px;
    margin: 5px;
    border-radius: 10px;
    border-top:3px solid #777777;
    border-right:3px solid #333333;
    border-bottom:3px solid #444444;
    border-left:3px solid #777777;
    background: #eee;
    position: relative;
}




.sub-menu {
padding-top: 5px;
left:-3px;
top: 100%;
z-index: -1;
position:absolute;
}

.sub-menu ul {
  padding: 0;
  margin: 0;
}

#menu .sub-menu ul li {
  margin: 0;
}

#menu > ul > li:hover .sub-menu {
z-index: 1;
}

#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}


#menu {
float: left;
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;

}


#footer {
float: left;
width: 100%;
background-color: white;
}

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
<body>
<div id="header">
</div>

<div id="menu">
    <ul>
        <li>
            <a href="#">Familien</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">Familie editieren</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Patienten</a></li>
        <li><a href="#">Materialien</a></li>
        <li><a href="#">Proben</a></li>
    </ul>    
</div>
<div id="main">
<h1>
Welcome to biobank v1.0
</h1>
</div>
<div id="footer">footer</div>
</body>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download