menu za pomocą flexa, linkowanie

Question

Hej, robię menu tylko za pomocą css i html, postanowiłam, że skoro ćwiczę podstawy to włączę w to flexa. Po zrobieniu całego menu, stwierdziłam, że podlinkuję, jeszcze główny pasek czyli "profile"...no i tutaj zaczął się problem. Zarówno "profile" jak i div w którym się znajdował miały nałożone display: flex. Kiedy próbowałam nałożyć znacznik a na diva "profile" wtedy dzieci "profile" traciły swoje właściwości i układały się w kolumnie, zamiast w wierszu. Dopiero jak nałożyłam flexa na znacznik a (i usunęłam z "profile"), to sprawa się rozwiązała i dzieci "profile" znowu ustawiły się w wierszu. Wyglądało to tak jakby profile "wyskoczył" poza znacznik a. Wie ktoś w czym może być problem?

<div class="usermenu">
							<a href="#" class="linkprofile">
								<div class="profile">
									<img class="avatar" src="img/avatar.png" alt="avatar" height="28" width="28"/>
									<div class="profilemenu">
										MOSHITA
									</div>
									<i class="icon-down-open"></i>
									<ul class="menu">
										<a href="#"><li><i class="icon-user-circle-o"></i>Strona główna</li></a>
										<a href="#"><li><i class="icon-pencil-squared"></i>Edytuj profil</li></a>
										<a href="#"><li><i class="icon-wrench"></i>Ustawienia strony</li></a>
										<a href="#"><li><i class="icon-logout"></i>Wyloguj</li></a>
										<a href="#"><li><i class="icon-list"></i>Listy<i class="icon-down-open"></i></li></a>
										<a href="#"><li>Lista anime</li></a>
										<a href="#"><li>Lista mang</li></a>
										<a href="#"><li>Do obejrzenia</li></a>
										<a href="#"><li>Do przeczytania</li></a>
										<a href="#"><li><i class="icon-mail"></i>Wiadomości</li></a>
										<a href="#"><li><i class="icon-bell-alt"></i>Aktualności</li></a>
									</ul>
								</div>
							</a>
					<button class="mangashortcut"><img src="img/manga.png" alt="manga"/></button>
					<button class="animeshortcut"><img src="img/anime.png" alt="anime"/></button>
					<button class="searchshortcut"><i class="icon-search"></i></button>
				</div>

/*usermenu---------------*/
.usermenu{
	display: flex;
	width: 247px;
	height: 36px;
}
.linkprofile{
	display: flex;
}
.profile{
	
	background-color: #868986;
	height: 30px;
	width: 125px;
	margin: 3px 10px 3px 10px;
}

.profile:hover > .menu{
	display: block;
}

.avatar{
	border-radius: 5px;
	margin-left: 8px;
	margin-right: 6px;
}
.profilemenu{
	height: 30px;
	width: 90px;
	font-size: .7em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu{
	position: absolute;
	top: 33px;
	left: 0;
	font-size: .8em;
	line-height: 2.3;
	z-index: 100;
	list-style-type: none;
	width: 210px;
	background-color: #868986;
	display: none;
	
}
.menu li{
	margin-left: 15px;
}
.menu li > i{
	padding-right: 5px;
}
.menu > a:nth-child(10),
.menu > a:nth-child(7),
.menu > a:nth-child(8),
.menu > a:nth-child(9){
	margin-left: 32px;
}
.menu a{
	display: block;
}
.menu a:hover{
	text-decoration: underline;
}
.usermenu > button{
	height: 36px;
	width: 34px;
	border: none;
	background-color: #07090e;
}

.mangashortcut:hover{
	cursor: pointer;
	background-color: #45433f;
	border-radius: 4px;
}
.animeshortcut:hover{
	cursor: pointer;
	background-color: #45433f;
	border-radius: 4px;
}
.searchshortcut{
	cursor: pointer;
}
.icon-search{
	display: flex;
	height: 36px;
	width:34px;
	align-items: center;
}
 .linkprofile > .icon-down-open{
	display: flex;
	align-items: center;
}

 

Answer 1

w znacznikach <ul> oraz <ol> zamieszczamy tylko znaczniki <li>, czyli .menu do poprawy w html bo masz tam <a> a dopiero później <li>

a.linkprofile nie jest potrzebny bo tylko otwiera dropdown, ale jeśli jest potrzebny to powinien linkować tylko .avatar i .profilemenu a nie całą listę z .menu

w przypadku .menu z position: absolute; nie masz ustawionego parenta z position: relative i może Ci to  rozjechać stronę, czyli na .profile powinien być zrobiony position: relative; możliwe też że w którymś miejscu masz ustawione width na jakąś ustaloną wartość i tekst wylewa się z tego, wtedy możesz zrobić maksymalną szerokość oraz przycinanie tekstu

https://codepen.io/Tnifey/pen/OJJygrp?editors=1100

lektura:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://css-tricks.com/almanac/properties/t/transform/

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY

https://css-tricks.com/solved-with-css-dropdown-menus/

 

Comments

Dzięki wielkie. Bardzo pomogło.