+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: CSS Rozwijane menu (/thread-css-rozwijane-menu--9231)
Strony:
1
2
CSS Rozwijane menu - Bert - 15-04-2012
Witam,
jestem nowym użytkownikiem tego forum związku z czym wypada się przywitać:
Cześć!
Zakładając ten temat należy przedstawić swój problem, tak więc:
Posiadam menu które składa się z dwóch wierszy przycisków po najechaniu któregoś z nich rozwija się menu. Problem nie jest widoczny w menu które znajduje się w drugim wierszu lecz problem widoczny jest w menu, które znajduje się w pierwszym wierszu.
Problem polega na tym, że po rozwinięciu się menu, menu najeżdża na przyciski które są w wierszu drugim. Nic dziwnego by w tym nie było gdyby nie fakt, że gdy chcę wybrać jakąś opcję w tym rozwijanym menu (które nachodzi na przyciski w wierszu drugim) najeżdżam na przycisk w wierszu drugim. Chciałbym stworzyć coś takiego, że po rozwinięciu menu ma większy priorytet od przycisków (jest nad menu - przykrywa je)
Oto kod:
Cytat:.topnav { padding:2px 3px 2px 2px; height:32px; font-size:12px; line-height:12px; background-color:#36b8c5;}
/* level 0 */
.topnav ul { margin:0; padding:0; float:left; width:auto; height:34px;}
.topnav ul li { margin:0; padding:0 4px 0 0; float:left;}
.topnav ul li a { padding:9px 24px 10px; float:left; color:#fff; text-decoration:none; background:none; border-left:none; border-top:none; border-right:1px solid transparent; border-bottom:1px solid transparent;}
.topnav ul li.current_page_item { } /* active item first level */
.topnav ul li.current_page_item a { color:#797979; background:#f0f0f0 url(images/menu_a.gif) repeat-x left top; border-left:none; border-top:none; border-right:1px solid #2c98a2; border-bottom:1px solid #2c98a2;}
.topnav ul li a.a_hover_main { color:#797979; background:#f0f0f0 url(images/menu_ar.gif) no-repeat center top; border-left:none; border-top:none; border-right:1px solid #2c98a2; border-bottom:1px solid #2c98a2;} /* on hover */
/* level 1 */
.topnav ul li ul { fieldset p {z-index:-1}; padding:6px 0 0; top:31px; left:0; height:auto; background:#f0f0f0; border-left:none; border-top:none; border-right:1px solid #2c98a2; border-bottom:1px solid #2c98a2;} /* position of submenu */
.topnav ul li ul li { margin:0; padding:0; background:none; border-top:1px dotted #9a9a9a;}
.topnav ul li ul li a { padding:10px 24px; width:122px; font-size:12px; font-weight:normal; color:#858585; background:none; border:1px solid transparent;}
.topnav ul li ul li a.have_submenu { } /* if item have submenu */
.topnav ul li ul li a:hover,
.topnav ul li ul li a.have_submenu_hover { color:#36b8c5;}
.topnav ul li ul li ul { padding:6px 0 0; top:-7px; left:172px;} /* position of submenu level 2 */
/* DESIGN NAV1 (categories) */
#nav1 { }
/* level 0 */
#nav1 ul { }
#nav1 ul li { }
#nav1 ul li a { }
#nav1 ul li.current-cat { } /* active item first level */
#nav1 ul li.current-cat a,
#nav1 ul li a.a_hover_main { } /* on hover */
/* level 1 */
#nav1 ul li ul { } /* position of submenu */
#nav1 ul li ul li { }
#nav1 ul li ul li a { }
#nav1 ul li ul li a.have_submenu { } /* if item have submenu */
#nav1 ul li ul li a:hover,
#nav1 ul li ul li a.have_submenu_hover { }
#nav1 ul li ul li ul { } /* position of submenu level 2 */
#nav1 * { }
.topnav * { z-index:1001;}
/* DO NOT EDIT!!! */
ul.menusm { list-style:none;}
ul.menusm li { cursor:pointer; position:relative;}
ul.menusm li a { position:relative;}
ul.menusm li ul { display:none; position:absolute; list-style:none;}
ul.menusm li ul li ul { position:absolute; list-style:none;}
RE: CSS Rozwijane menu - Kartofelek - 15-04-2012
.topnav ul li ul { fieldset p {z-index:-1}; padding:6px 0 0; top:31px; left:0; height:auto; background:#f0f0f0; border-left:none; border-top:none; border-right:1px solid #2c98a2; border-bottom:1px solid #2c98a2;} /* position of submenu */
Co to za pokraka? .topnav ul li ul {....{}....} - taka konstrukcja jest nieprawidłowa. Właściwie jest ok, ale nie w tym miejscu.
z-index:-1 to jest ogólnie błędna deklaracja, która sprawia że coś idzie pod spód. Może to właśnie to psuje? Zamień na dodatnie i sprawdź.
RE: CSS Rozwijane menu - Bert - 15-04-2012
(15-04-2012, 06:04)Kartofelek napisał(a): .topnav ul li ul { fieldset p {z-index:-1}; padding:6px 0 0; top:31px; left:0; height:auto; background:#f0f0f0; border-left:none; border-top:none; border-right:1px solid #2c98a2; border-bottom:1px solid #2c98a2;} /* position of submenu */Właściwie to moj błąd próbowałem kilka rzeczy i zapomniałem tego usunąć, tego domyślnie nie ma. Nic to nie daje.
Co to za pokraka? .topnav ul li ul {....{}....} - taka konstrukcja jest nieprawidłowa. Właściwie jest ok, ale nie w tym miejscu.
z-index:-1 to jest ogólnie błędna deklaracja, która sprawia że coś idzie pod spód. Może to właśnie to psuje? Zamień na dodatnie i sprawdź.
RE: CSS Rozwijane menu - Kartofelek - 15-04-2012
link daj
RE: CSS Rozwijane menu - Bert - 16-04-2012
RE: CSS Rozwijane menu - Kartofelek - 16-04-2012
42 linijka daje wszystkim taki sam index, co jest błędne
RE: CSS Rozwijane menu - Bert - 16-04-2012
(16-04-2012, 03:21)Kartofelek napisał(a): 42 linijka daje wszystkim taki sam index, co jest błędne
Zmieniłem na auto ale i tak to nie rozwiązuje mojego problemu
RE: CSS Rozwijane menu - Kartofelek - 16-04-2012
Oj kolego kolego,
.topnav ul li ul {z-index:100;}
Ps. z-index : auto - nie ma czegoś takiego
RE: CSS Rozwijane menu - Bert - 16-04-2012
Dziękuję działa! ;-)
RE: CSS Rozwijane menu - Kartofelek - 16-04-2012
W 99,99% nie ma czegoś takiego.