Hi all,
I have this problem with getting a submenu right in the navigation menu of a site I’m building.
The problem is that it won’t show the submenu.
You can check the website here:
http://www.kwestievan.nu
Under ’weekmenu’, a submenu is available. However, this is not shown on hovering over weekmenu, as I expect it to.
For the navigation, I use Wayfinder in a pretty straightforward way. Here is the template including the Wayfinder call:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name" />
<base href="[(site_url)]"></base>
<link rel="stylesheet" type="text/css" href="assets/templates/andreas00/andreas00.css" media="screen,projection" />
<title>[*pagetitle*] - A free website template by Andreas Viklund modified by Bright Byte for Kwestie Van</title>
[*hideSidebar*]
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">[*pagetitle*]</a></h1>
<p><strong>[*longtitle*]</strong></p>
</div>
<div id="lefttop">
<div>
<div id="leftside">
<h2 class="hide">QST menu:</h2>
[[Wayfinder? &startId=`0` &level=`2` &displayStart=`1` &startItemTpl=`startItem` &outerTpl=`outer` &selfClass=`current` &rowTpl=`row` ]]
</div>
<div id="leftbottom">
</div>
<div id="contenttop">
</div>
<div id="content">
[*content*]
</div>
<div id="contentbottom">
</div>
<div id="footerPicsTop">
</div>
<div id="footerPics">
</div>
<div id="footerPicsBottom">
</div>
<div id="footer">
{{footer}}
</div>
</div>
</body>
</html>
Further on, here is the CSS code for the navigation part:
#leftside {float:left; background-color:#5eddc0; background:url(img/navbck.jpg) repeat-y top center; margin-top:35px; padding:0; width:220px; height:400px;}
#leftside ul {list-style:none; margin:0 0 18px; padding:0; width:150px;}
#leftside a {color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}
#leftside a:hover,#leftside ul li a.current {background-color:#5eddc0; color:#505050;}
#leftside ul ul {display:none; position:relative; left:100px; font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul ul:hover li {display: block;}
#leftside ul ul ul {font-size:1em; width:120px;}
#leftside ul ul ul a {width:108px;}
#leftside h2 {font-size:1.5em; font-weight:400;}
#leftside p,.announce p {font-size:0.9em;} */
When I comment out the line
#leftside ul ul:hover li {display: block;}
And remove the "display:none;" from the #leftside ul ul line, The whole menu, including submenu’s is shown.
How can I achieve that the submenu is shown on hovering the navigation menu ’weekmenu’ ?
Cheers,
Unforgiven.
☆ A M B ☆
