Mouse over in plaats van klikken in dropdown menu

20 jan 2014 13:25 - 20 jan 2014 13:26

Hallo,

Ik ben met de volgende site bezig www.caiburgerenk.nl
Bovenin werk ik met een dropdownmenu. Echter worden de submenu items pas weergegeven wanneer ik op het hoofdmenu item heb geklikt. Nu wil ik dat deze al naar voren komen bij het opstaan met de muis, dus het mouseover effect. Kan iemand mij vertellen hoe ik dit oplos? Ik maak gebruik van de borrennature template.

Code:

/****************************************************
#####################################################
##-----------------borren NATURE ------------------##
##-------------------------------------------------##
## Copyright = globbersthemes.com- 2013            ##
## Date      = nOVEMBRE 2013                       ##                     
## Author    = globbers                            ##
## Websites  = http://www.globbersthemes.com       ##
##                                                 ##
#####################################################
****************************************************/

html {
height: 100%;

}

body{
margin:0;
padding:0;
text-align:center;
background:#f1f3f5;
font-size:13px;
color:#6e6e6e;
font-family:  Arial, Helvetica, sans-serif;
font-weight:normal;

}

#background {
background-repeat:repeat-y;
position:fixed;
width:100%;
top:-5px; 
left:0; 
z-index:-1; 

} 

/*texte*/

p {
font-size: 100%;

}

h1 {
font-size: 200%;

}


h2 {
font-size: 150%;

}

h3 {
font-size: 125%;

}

h4, h5, h6 {
font-size: 100%;

}

/* liens hypertextes*/

 a:link, a:visited {
text-decoration:none;
font-weight:bold;
color:#6e6e6e;

}

a:hover {
color:#666698;

}

 ul {
margin:0;
padding-left:20px;

}

li {
list-style-type:square;
background:transparent;
margin: 4px;

}

img {
border:none;
margin: 5px 0px 10px 0px;
padding:0;

}

img .caption {
text-align: left;

}

.highlight{
background:#666698;
padding: 0px 2px 0px 2px;
color:#f1f1f1;

}

.button {
background:#666698;
border:none;
color:#4b6d86;
font-weight:bold;
padding:4px;

} 

.inputbox {
color:#4b6d86;
background:#666698;
border:none;
padding:4px;
font-weight:normal;

} 

.pagewidth{
width:880px;
text-align:center;
background:transparent;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;

}

label {
text-align:left;
color:#666698;

}

fieldset {
margin:0px 5px 5px 5px;
padding:10px;
border:none;

}

.clr {
clear:both;

}

/***************************/


/*********************/

#topmenu {
float:left;
width:800px;
height:50px;
background:transparent;
margin:35px 0 0 40px;

}

.navigation { 
float:left;
width: 800px; 
background:transparent;
margin-top:10px;

}

.navigation ul {
list-style: none; 
margin:0; 
padding:0;
float: left;

}

.navigation ul ul {
margin: 0; /* all lists */
padding: 0;

}

.navigation ul li {
margin:0 7px;
padding: 0;
float: left;
list-style: none;
background: none;
display: block;

}

.navigation ul li ul {
width: 180px;
position: absolute; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
w\idth: 180px;

}

.navigation ul li ul ul {
margin: 0; /* third-and-above-level lists */

}

.navigation ul li li {
padding: 0;
margin: 0;
width: 100%;

}

.navigation ul ul a {
width: 180px;

}

.navigation ul li:hover ul ul,
.navigation ul li:hover ul ul ul,
.navigation ul li.sfhover ul ul,
.navigation ul li.havechildsfhover ul ul,
.navigation ul li.havechild-activesfhover ul ul,
.navigation ul li.activesfhover ul ul,
.navigation ul li.sfhover ul ul ul,
.navigation ul li.havechildsfhover ul ul ul,
.navigation ul li.havechild-activesfhover ul ul ul,
.navigation ul li.activesfhover ul ul ul {
left: -999em;

}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
.navigation ul li:hover ul,
.navigation ul li li:hover ul,
.navigation ul li li li:hover ul,
.navigation ul li.sfhover ul,
.navigation ul li.havechildsfhover ul,
.navigation ul li.havechild-activesfhover ul,
.navigation ul li.activesfhover ul,
.navigation ul li li.sfhover ul,
.navigation ul li li.havesubchildsfhover ul,
.navigation ul li li.havesubchild-activesfhover ul,
.navigation ul li li.activesfhover ul,
.navigation ul li li li.sfhover ul,
.navigation ul li li li.havesubchildsfhover ul,
.navigation ul li li li.havesubchild-activesfhover ul,
.navigation ul li li li.activesfhover ul {
left: auto;

}

/* STYLING THE MENU

-----------------------------------*/

/* 1st level */
.navigation ul li a {
padding: 12px 10px 0 10px ; 
margin:0;
display: block; 
font-weight: bold;	
font-size:13px;
text-transform:capitalize;
height:30px;
background:#4b6d86; 
color:#020202;
}

.navigation ul li {
height:30px;

}

.navigation li.active a {
color:#fff ;
height:30px ;
background:#666698;

}

.navigation li:hover a {
color:#fff ;
height:30px ;
background:#666698 ;

}

/* 2nd level and above */

 .navigation ul li ul {
text-align:left !important;
background:#666698 !important ;
width:200px;
margin-top:-10px;
margin-bottom:15px;

}

.navigation ul li ul li {
height:40px !important;
background:none !important;
border-bottom:1px dotted #fff;

} 

.navigation ul li ul li a{
color:#fff;

} 

.navigation ul li ul li a:hover{
color:#7c7c76;

} 

 .navigation ul li ul li ul {
margin-left:190px;
margin-top: -30px;
text-align:left !important;

} 

.navigation ul li ul li.active {
height:40px ;
background:none !important ;

}

.navigation ul li ul li.active span {
height:40px ;
background:none !important ;

}

.navigation ul li ul li.active a {
color:#fff ;
height:40px ;
background:none !important ;

}

.navigation ul li ul li {
height:40px ;
background:none !important ;

}

.navigation ul li ul li span {
height:40px ;
background:none !important;

}

.navigation ul li ul  li a {
height:40px ;
color:#fff ;
background:none !important;

} 

/****SLIDE*********/
#slide {
float:left;
width:835px;
height:335px !important;
background:;
margin-top:25px;
margin-left:21px;
position:relative;
padding:0;
border:0px solid #e7e7e2;

}

#slideshow-w {
float:left;
width:835px;
height:335px !important;
margin:10px 0 0 10px;

}

#slideshow {
float:left;
width:835px;
height:335px;
background:transparent;
position:relative;

}

.slideshowlite {
float:left !important;
width: 835px;
height:335px;
padding:0;
margin:0;

}

.slideshowlite a {
position:absolute;
left:0;
z-index: 5;
text-align:left;

} 

.slideshowlite img {
border: none;
z-index:3;
margin:0;
padding:0;

} 

.slideshowlite ul {
position: absolute;
margin-top: 330px;
left:10px !important;
 z-index: 9; 
list-style-type:none;
background:;
width:75px;
height:25px;

}

.slideshowlite ul li,
.slideshowlite ol li {
float: left;
width: 14px;
padding: 0 2px 0 2px;
margin:0;
list-style-type:none;
border:none !important;

}

 .slideshowlite ul li a {
background:#393d28;
 position: relative; 
display: block; 
width: 14px !important;
height: 14px !important;
float: left;
line-height: 23px; 
text-decoration: none;
text-align: center !important;
font-size: 12px;
 font-weight: bold; 
color: #fff !important;
border:none !important; 
text-indent:-5000px;
margin-top:5px;
margin-left:350px;
border-radius:25px;

}

.slideshowlite ul li a.current {
background:#ccc;
border-radius:25px;

}

.slideshowlite ul li a:hover {
background:#ccc;
border-radius:25px;

}

.slideshowlite ol {
display: none;

} 

/***********************/
#main {
float:left;
background:transparent;
width:610px;
padding:0;
text-align:left;
margin-bottom:10px;
margin-left:20px;
margin-right:10px;
margin-top:50px;

}

#main-full {
float:left;
width:820px;
text-align:left;
margin-bottom:10px;
background:transparent;
margin-top:0px;
margin-left:20px;
margin-right:10px;
margin-top:40px;

}

/*****************/
.contentheading {
font-size:18px;
font-weight:bold;
padding-top:12px;
padding-bottom:12px;

}

/******CALENDAR*******/
.calendar {
float:left;
margin-right:15px;
margin-bottom:0; 
display:block ;
padding: 5px 0 0 0 ;
background:#666698;
width:40px ;
height:40px;
text-align:center;
}

.day {
color: #fff;
font-weight:bold;
margin: 0 0 5px 0;
padding:0  ;
font-size:12px;
background:transparent;
display:block;

}

.month {
color: #fff;
font-weight: bold;
margin: 0;
padding:0px 0 0 0 ;
font-size:12px;
background:transparent;
display:block;

}

/***********************/

#right {
float:left;
width:215px;
margin-top:33px;
text-align:left;

}

#right h3 {
font-size:18px;
text-transform:capitalize;
text-align:left;
font-weight:bold;

}

#right .moduletable_menu,
#right .moduletable {
margin-bottom:20px;
padding-left:20px;
padding-right:20px;
background:#f1f3f5;
padding-bottom:20px;
font-size:12px;
border:1px solid #e7e7e2; 

}

#right .moduletable_menu a,
#right .moduletable a,
#right a {

}

#right .moduletable_menu a:hover,
#right .moduletable a:hover,
#right a:hover {

}

/***************************/
#footer {
float:left;
width:830px;
background:#f1f3f5;
margin-top:10px;
margin-left:25px;

}

.box{
float:left;
width:190px;
padding-bottom:20px;
margin-top:0px;
padding-top:15px;
text-align:left;
margin-left:10px;

}

.box .moduletable_menu h3,
.box .moduletable h3,
.box h3 {
font-size:15px;
text-transform:uppercase;
text-align:left;
font-weight:bold;
margin-left:10px;

}

.box .moduletable_menu ,
.box .moduletable ,
.box  {
padding-bottom:10px;
font-size:12px;


}

.box .moduletable_menu a,
.box .moduletable a,
.box a {
font-weight:normal;
font-style:italic;
font-size:13px;


}

.box .moduletable_menu a:hover,
.box .moduletable a:hover,
.box a:hover {


}

/***********************/

#ftb-f{
 float:left;
 width:800px;
 height:60px;
 background:transparent;

}

 .ftb {
 float:left;
 margin-top:20px;
 text-align:center;
 font-weight:bold;
 font-size:13px;
 width:730px;
color:#7c7c76;
 padding:0;

}

 .ftb a{
 padding:0 !important;
 border:none !important;
color:#7c7c76;
 font-weight:bold;

} 

 .ftb a:hover{
 padding:0 !important;
 border:none !important;
color:#7c7c76;

} 

#top {
 float:left;
 width:30px !important;
 height:30px !important;
 margin-top:10px !important;
 padding:0 !important;
 border:none !important;
 background:transparent;

 }

 .top_button {
 padding:0 !important;
 border:none !important;
 width:30px !important;
 height:30px !important;

 }

Laatst bewerkt 20 jan 2014 13:26 door marcovanderhaar.

marcovanderhaar
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 7

Mouse over in plaats van klikken in dropdown menu

20 jan 2014 13:40

Kan een conflict zijn tussen je template en het superfish menu. Zie ook dat er een foutmelding komt mbt www.caiburgerenk.nl/templates/borrennature/js/hover.js

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.