tonen subsubmenu(multidropown) items icm bootstrapframework

11 jan 2016 23:23 - 11 jan 2016 23:47

Ik heb een responsive site gemaakt met behulp van het bootstrap framework met een menu fixed bovenin.

Wat tot nu toe niet is gelukt is het tonen/stylen van een menu-item met items die weer subitems toon en die niet over elkaar heen komen liggen zodat je ze ook kunt aanklikken (een multi dropdown menu). Nu liggen alle sub-items over elkaar heen.

Ik maak gebruik van deze styling:

Code:

/*styling navigatiebalk*/

#colornav {
background:#FF6600;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background-color: #ff6600;
color: #FFFFFF;

height:80px;
padding-top:50px;
}

.navbar-default .navbar-nav > .active > a:hover {
background-color:#1c3055;
}

.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
padding-top:50px;
height: 80px;
}

.navbar-default .navbar-nav > li > a:hover {
background-color:#1c3055;
color:#FFFFFF;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #1c3055;
border:solid 1px #1c3055;
}

.icon-bar {
background-color:#FFFFFF !important;
}

@media only screen and (max-width : 768px) {
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
}

.navbar-default .navbar-nav > li > a:hover {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
background-color:#1c3055;
border-bottom: solid 2px #1c3055;
}

.navbar-default .navbar-nav > li > a {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
}
}

/*einde styling navigatiebalk*/

/*dropdown als je er met de muis boven zweeft */
ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; }

/* de dropdown caret (driehoekje) verwijderen */
.nav .dropdown-toggle .caret { display:none; }


/* de sub menu items stylen */
ul.dropdown-menu {
background: #FF6600;
}

.dropdown-menu > li > a  {
color: #FFFFFF;
}

.dropdown-menu > li > a:hover  {
color: #FFFFFF;
background-color:#1c3055;
}

Ik zou graag advies van iemand ontvangen om de subsubmenus beter te kunnen tonen, of dat iemand een ander idee heeft.

Groet,
PietJohan
joomla 3.4.8
php 5.4.22
MySql 5.5.34
Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

Laatst bewerkt 11 jan 2016 23:47 door Astrid.

Discussie gesloten.