Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
MENU - poważny problem wysokości! - Wersja do druku

+- 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: MENU - poważny problem wysokości! (/thread-menu-powazny-problem-wysoko%C5%9Bci)

MENU - poważny problem wysokości! - asus - 05-12-2014

Witam,

Już dłuższy czas zastanawiam się nad odpowiednim rozwiązaniem dotyczącym prezentowanego menu.

Zacznę od początku:

1. Obraz menu główny:
[Obrazek: sgra7f3687tj.png]

2. Po najechaniu na główną kategorie rozwija się menu z podkategoriami:
[Obrazek: o8uvi3ilkk1r.png]

W podkategori UBRANIE są kolejne podkategorie i określona wysokość okna.
Po przejściu do podkategori JEDZENIE wysokość okna jest taka sama jak w kategori UBRANIE mimo że podkategorie występują już tylko w jednej lini.
[Obrazek: 17t6y8vbfhi1.png]

Mój problem polega własnie na tym by po najechaniu odpowiedniej podkategori wysokość okna była zależna od ilości lini kolejnych podkategori. Proszę o pomoc jak to rozwiązać by wysokość okna była zmienna i dostosowana do wyświetlanej zawartości.

LINK do podglądu na żywo > http://qwerty2014.cuccfree.com/

KOD HTML
Kod:
<nav id="menu">
            <ul>
            <li class="main active"><a href="#">ON ONA ONO ONI</a><div class="background" style="position: absolute; width: 141px; left: 82px; height: 10px; z-index: 9999; background: white;"></div>
                      <ul class="submenu" style="height: 133px;">
         <div class="submenu-ov">
                                    <li style="width: 163.666666666667px;"><div class="m-head-ov"><span class="m-head"><a href="#" style="color: rgb(33, 33, 33);">UBRANIE</a></span><div class="bg" style="visibility: visible; width: 0px;"></div></div>
                                        <ul class="submenu-absolute" style="display: block;">
                                                  <li style="display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[2]</span></li>
                                                  <li style="display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="margin-right: 0px; display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                                  <li style="margin-right: 0px; border: none; display: block;"><a href="#" style="color: rgb(33, 33, 33);">Kategoria</a><span class="cnt">[0]</span></li>
                                           </ul>
                <div style="clear:both"></div>
                                    </li>
                                    <li style="width: 163.666666666667px;"><div class="m-head-ov"><span class="m-head"><a href="#" style="color: rgb(194, 7, 7);">JEDZENIE</a></span><div class="bg" style="visibility: hidden; width: 0px;"></div></div>
                                        <ul class="submenu-absolute" style="display: none;">
                                                  <li style="border: none; display: block;"><a href="#">Kategoria2</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="#">Kategoria2</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="#">Kategoria2</a><span class="cnt">[0]</span></li>
                                                  <li style="border: none; display: block;"><a href="#">Kategoria2</a><span class="cnt">[0]</span></li>
                                           </ul>
                <div style="clear:both"></div>
                                    </li>  
                         </div>
             </ul>
                 </li>
    </ul>
        </nav>

KOD CSS
Kod:
#menu {
  position: relative;
  clear: both;
  margin-top: 20px;
  float: left;
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid #e0e0e0;
  z-index: 501;
}
#menu li.main {
  padding: 0 15px 0 15px;
  border: 1px solid white;
  padding-bottom: 4px;
  float: left;
  line-height: 34px;
  background: url("../../../images/menu_li_bg.gif") no-repeat 100% 37%;
  margin-left: -2px;
}
#menu li.main:last-child {
  background: none;
}
#menu li.main:hover {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background: none;
  -webkit-box-shadow: 3px 0px 1px -2px #d6d5d5;
  box-shadow: 3px 0px 1px -2px #d6d5d5;
}
#menu li.main:hover .submenu {
  display: table;
}
#menu li.main:hover .background {
  display: block;
}
#menu li.main .background {
  display: none;
}
#menu>ul>.main>a {
  font-size: 13px;
  color: #212121;
  display: block;
  /*padding:0 15px 0 15px;*/
}
#menu ul {
  float: left;
  margin-top: 3px;
}
#menu #hed {
  margin-right: 7px;
  margin-top: 8px;
  float: left;
  color: white;
  background: #212121 url("../../../images/hed_bg.gif") no-repeat 100% 50%;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 19px 6px 14px;
}
#menu .main:first-child .submenu{
  /*display:block;*/
}
#menu .submenu {
    display:none;
    min-height:30px;
   width: 100%;
  position: absolute;
  left: 0;
  margin-top: 4px;
  padding-bottom: 10px;
  border: 1px solid #e0e0e0;
  -webkit-box-shadow: 1px 1px 1px 1px #d6d5d5;
  box-shadow: 1px 1px 1px 1px #d6d5d5;
  background: white;
  height:100px;
}
#menu .submenu>.submenu-ov>li {
    display:table-cell;
}
#menu .submenu-ov{  
   width: 98%;
   display:table;
   padding-left:10px;
}

#menu .submenu .m-head-ov>div.bg{
  background:url("../../../images/arrow_menu_top.png") no-repeat 46% 102%;
  padding-bottom:7px;  
  position:relative;
  top:-1px;
  visibility: hidden;
}
#menu .submenu .m-head {
  color: #c20707;
  background: none;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 0 2px 0;
  display: block;
    border-bottom:1px solid #e0e0e0;
}
#menu .submenu li:hover .m-head a{
    color:#212121;
}
#menu .submenu ul {
  margin-top: 0;
}

#menu .submenu-absolute{
    position:absolute;
    width:100%;
}
#menu .submenu>.submenu-ov>li>.submenu-absolute {
    display:none;
    left:10px;
}
#menu .submenu>.submenu-ov>li>.submenu-absolute li {
    width:17%;
    float:left;  
    position:relative;
    border-bottom:1px solid #e0e0e0;
    margin-right:31.6px;
    
}
#menu .submenu>.submenu-ov>li:first-child .bg{
    visibility:visible;
}
#menu .submenu>.submenu-ov>li:first-child>.submenu-absolute {
    display:block;
}

#menu .submenu>.submenu-ov>li>.submenu-absolute a{
    font-size:12px;
    color:#212121;
}
#menu .submenu .cnt {
  line-height: 15px;
  position: absolute;
  top: 7px;
  right: 0;
  font-size: 11px;
  color: #7f7f7f;
  padding: 2px 5px;
}