Tak jak w temacie.

http://iv.pl/images/96913422521478626117.png

http://iv.pl/images/93828872953946247413.png

Treść idzie do dołu..
position: absolute; psuje to rozsuwanie ;/

Nie załączyłeś gumki i ołówka...

CSS:

[CSS] pobierz, plaintext 
#userpasek {
	width: 100%;
	border:1px solid #000;
	box-shadow:0 1px 0 #555 inset, 0 1px 7px #111;
	border-radius:3px;
	padding: 3%;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}
 
#userpasek img {
float: left;
width: 22px;
height: 22px;
border-radius: 10px 10px 10px 10px;
vertical-align: middle;
padding: 1%;
}
 
#userpasek i {
float:right;
}
 
#userpasek:hover {
	cursor:pointer;
	background-color: #2C363B;
}
 
#userpasek ul {
	display:none;
	margin:20px 0 0 0;
	padding: -1%;
	text-align: left;
	background-color: #2C363B;
}
#userpasek ul li a {
  display: block;
  color: #32A1CC;
  padding: 2%;
  margin: 2%;
  border-top: 1px solid black;
  font-size:16px;
}
 
#userpasek ul li a:hover {
  transition-duration:1s;
	color: #32A1CC;
	background-color: #3F4E54;
	box-shadow: 0 0 15px black;
}
 
#userpasek:hover ul {
	display: block;
 
}
[CSS] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div id='userpasek'>
<img src="<?php echo $awatar; ?>" />
<?php echo $_SESSION["login"]; ?>
 
<i class="fa fa-bars"></i>
<ul>
<li><a href="acp.php">ACP<i class="fa fa-cogs"></i></a></li>
<li><a href="profil.php?profil=<?php echo $_SESSION['login']; ?>">Profil<i class="fa fa-user"></i></a></li>
<li><a href="panel.php">Ustawienia<i class="fa fa-cog"></i></a></li>
<li><a href="wyloguj.php">Wyloguj<i class="fa fa-power-off"></i></a></li>
</ul>
</div>
[HTML] pobierz, plaintext 

PS: Może być trochę namieszane, bo od rana coś próbuję to zrobić ;/

Pomoże ktoś? Głupia sprawa, ale nie mogę sobie dać rady z tym.

position: flex, czy absolute nie działa na to ;/ A wręcz psuje to "menu"

http://jsfiddle.net/qyx2rtxh/5/

@sami

Działa Dziękuję, ale dlaczego nie ma rozmiarów powiązanych z rodzicem?

Jest to obiekt w divie, ale zachowuje się jak by nie był