Проблем с DropDown меню

[tyrla4eto]

Здравейте, правя едно просто dropdown меню, като посочиш на даден текст, то да се показва. Проблемът е там, че когато се покаже менюто, то прозира, тоест показват се и менюта, които са в сайта, които са отдолу и когато отида с мишката до менюто, което прозира dropdown менюто изчезва.
Изполвам този HTML:

<div class="row clearfix">
				<div class="little-head">
					<div class="sign-btn" style="color: white;">
					<div class="dropdown">
					<p class="dropbtn">HOVER ME</p>
							<div class="dropdown-content">
								<a href="#">MENU 1</a>
								<a href="#">MENU 2</a>
								<a href="#">MENU 3</a>
							</div>
						</div>
					</div>
					</div>
					</div>

И този CSS:
[css]
.row {
width: 1060px;
margin: 0 auto;
padding: 0 40px;
position: relative;
}
.dropbtn {
color: white;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
margin-top: -20px;
background-color: #f9f9f9;
min-width: 140px;

}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown:hover .dropdown-content {
display: block;
}[/css]

Проблемът идва от див таг-а "ROW". Ако го премахна менютата се разместват и под dropdawn менюто няма текст и работи както трябва. Как мога да го оправя това?

 

[anonimen]

Дай линк с минимален пример в http://jsfiddle.net , в който се вижда как не работи.

Казваш, че "прозира", но това означава някъде да си сложил "background: transparent" или "opacity: 0" или нещо подобно, а такива стилове не виждам в твоя css.

 

[joTunkiq]

Фикснах го. Както каза колегата, или имаш прозрачен фон или опаситито ти е на 0. В твоя случай нямаше нито едното, т.е., когато не зададеш фон на някой див, то, той по подразбиране няма фонов цвят. Ти беше "казал", че самото менюто е блоково и ПОДменютата да са с бял фон(фонов цвят), но не беше стилизирал главното меню.

https://jsfiddle.net/bL3dosnm/ - ето демо. За напред, когато искаш помощ относно html, css, jquery/javascript ползвай jsfiddle, за да може да видим кода в действие и да можем да дебъгваме в реално време, плюс това ще направиш поста си по-кратък и по-лесен за четене

Успех с ученето на html :idea: :?:

 

[tyrla4eto]

Фикснах го. Както каза колегата, или имаш прозрачен фон или опаситито ти е на 0. В твоя случай нямаше нито едното, т.е., когато не зададеш фон на някой див, то, той по подразбиране няма фонов цвят. Ти беше "казал", че самото менюто е блоково и ПОДменютата да са с бял фон(фонов цвят), но не беше стилизирал главното меню.

https://jsfiddle.net/bL3dosnm/ - ето демо. За напред, когато искаш помощ относно html, css, jquery/javascript ползвай jsfiddle, за да може да видим кода в действие и да можем да дебъгваме в реално време, плюс това ще направиш поста си по-кратък и по-лесен за четене

Успех с ученето на html :idea: :?:

Благодаря за съвета, колега. Но отново не се получава. На .little_head дали ще има фон или не няма значение, смисъл не променя нищо, а на .dropdown-content си сложил top:100%; и left: 0; Което премества подменюто надолу и пак прозира, само че прозира между 2 от подменютата и другото което е, че няма как да го стигна с мишката.

Проблем е също, че в момента в който изляза от границите на little-head менюто изчезва и прозира.

В

class="row clearfix"

има един clearfix, който не знам каква работа точно върши, но съм постнал и неговия код, както и кода на little-head.

https://jsfiddle.net/1ub8m1gg/8/

Не знам защо обаче, нещо не тръгва когато му дам RUN, къде бъркам? Не съм ползвал сайта до сега и се извинявам за глупавите въпроси..

 

[Fakeheal]

Не знам защо обаче, нещо не тръгва когато му дам RUN, къде бъркам? Не съм ползвал сайта до сега и се извинявам за глупавите въпроси..

Тръгва. Просто е най вдясно в страницата за preview.

 

[tyrla4eto]

Не знам защо обаче, нещо не тръгва когато му дам RUN, къде бъркам? Не съм ползвал сайта до сега и се извинявам за глупавите въпроси..

Тръгва. Просто е най вдясно в страницата за preview.

Да не съм обърнал внимание. Но тук проблем няма, явно нещо друго от дизайна пречи... Ако някой може да ми пише на лично и да ми помогне да го оправя?

 

[tyrla4eto]

Оправих го, като добавих:

[css].dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}[/css]

Благодаря за помоща!