Automatisch dropdown menu openen.

[SkullboyNL]

Ik ben bezig met wat testen van een joomla template die ik ooit is uit elkaar heb getrokken en weer in elkaar heb gedrukt met extra dingen en onnodige dingen verwijdert.

Nu zit ik met het probleem dat het menu wel goed werkt op volledig scherm maar net op mijn mobiel. De website is responsive en het menu schaalt ook mee. Dat werkt ook heel goed, maar zodra ik het menu open dan kan ik geen submenus meer openen.

Het volledige menu ziet er zo uit.



En het kleinere menu zo.



Nu klapt bij test2 het submenu niet uit ook niet als je er overheen gaat met de muis. Ik wil graag dat hij ook mee open gaat als je het hele hooftmenu openklapt.

Ik loop al een tijdje te klooien en te zoeken op google maar ik kom er niet uit. Weet iemand van jullie misschien een uitweg?

Hier de code van het kleine menu.

code:

#navbar{ display: none; height:auto; margin:0; padding:0;}
/* Menu */
#navbar-wrap { height:auto; display:block; margin:0 0 10px 0; padding:0;  border: 1px solid #dedede; background:#DEDEDE;  -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
/* Navigation */
#navigation { padding:0 10px; display:block;}
#navigation .menu { margin: 0; padding: 0; list-style: none; }
#navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; }
#navigation .menu > li { display: block; float:none;}
#navigation .menu > li ul {}
#navigation .menu ul { position: relative; left: 0; top: 100%; margin:0; nowhitespace: afterproperty; opacity: 1; transition:none; visibility: visible; z-index: 99; }
#navigation .menu ul ul { position:relative!important; margin:1px 0 0 0; padding:0; left:0px; width:100%; display:block;-webkit-box-shadow: none;-moz-box-shadow: none; box-shadow:none; }
#navigation .menu ul ul li { width:auto}
#navigation .menu li { position: relative }
#navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
#navigation .menu a { display: block; position: relative; }
/* current item */
#navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover { color: #E95846;}
#navigation .menu > .active > a, #navigation li.active > a { font-weight: bold; color: #E95846  }
#navigation .menu > li { margin:0; padding:0; }
#navigation .menu a { height:auto; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 45px; font-size:16px; padding:0 10px; }
/*drop-down styles*/
#navigation .menu ul { border-top: none; background:#ececec; border:none; display:none }
#navigation .menu li:hover ul { margin: 0; }
#navigation .menu ul ul.sub-menu { margin:0; padding:0; border-top: 1px solid #fff }
#navigation .menu ul ul.sub-menu li{ margin:0; padding:0; }
#navigation .menu ul li { border-bottom:1px solid #fff }
#navigation .menu ul li:first-child { }
#navigation .menu ul li:last-child { border: 0 }
#navigation .menu ul li > a:hover { color: #E95846 }
#navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 0 15px; text-transform: none; border: 0px;  }
#navigation ul.sub-menu .icon-angle-down:before {content:""!important;}
#navigation ul.sub-menu a { font-size:12px; line-height: 35px;}
#navigation i { text-align:right}

[BLACKfm]

Je hebt neem ik aan het grote menu en een kleine variant. Ik zou ze gewoon naast elkaar zetten en kijken waar het code technisch fout gaat. Misschien is het een kwestie van een <ul> of <li> die niet goed is afgesloten of dat het niet de juiste naamvoering (class/name) heeft voor het achterliggende script die de boel in en uitklapt.

Aan alleen opmaak (CSS) van het kleine menu en zonder code (HTML) kan ik in ieder geval niet zien of er wat fout gaat.

Edit: Oh, en gooi die CSS eens door iets als deze site. Dat maakt het een stuk prettiger leesbaar

[ Voor 13% gewijzigd door BLACKfm op 29-12-2014 00:33 ]