Ik ben inmiddels al aardig wat uurtjes bezig om een submenu op mijn site te krijgen.
Ik krijg alleen level 1 te zien en niet de subpagina's. De template (Horizontal_dropdown : EllNav Horiz/Vert L 2col) die ik gebruik heeft meerdere stylesheets waardoor ik ook door de bomen het bos niet meer zie..
Horizontal_dropdown : Tools
Horizontal_dropdown : Typography
Horizontal_dropdown : Forms
Horizontal_dropdown : Layout EllNav H/V L 2Col
Horizontal_dropdown : Layout
Horizontal_dropdown : Colours
Horizontal_dropdown : sort
Horizontal_dropdown : Nav-Horizontal
Ik heb ook al geprobeerd om het dropdown menu van de default template te gebruiken maar deze gaf de sub menu items steeds uiterst links in beeld aan ongeacht wat ik in de stylesheet wijzigde.
Hieronder mijn sjabloon en stylesheet:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<__html>
<head>
<!--[if IE]>
<__script__ type="text/javascript" src="uploads/Horizontal_dropdown/CSSMenu.js"></__script>
<![endif]-->
<!-- Type the title of your site here -->
<title>Maas Zorgverlening - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<__script__ type="text/javascript" src=uploads/Horizontal_dropdown/sucker.js"></__script
{global_content name='JavaScript for IE page width'}
</head>
</__body>
<div id="pagewrapper">
<div id="container">
<!-- start accessibility skip links -->
<ul class="accessibility">
<li><a href="#menu_vert" accesskey="s" title="Skip to navigation">Skip to navigation</a></li>
<li>{cms_selflink anchorlink='main' dir='anchor' text='Skip to content'}</li>
</ul>
<!-- end accessibility skip links -->
<hr />
<!-- Start Header, with logo image that links to the default start page -->
<div id="header" class="clearfix">
<h1>{cms_selflink dir="start"}</h1>
<hr />
</div>
<!-- End Header -->
<!-- Start Horizontal Menu -->
<div id="menu_horiz">
<h2 class="accessibility">Main Navigation</h2>
<div id="wrapper">
{cms_module module='menumanager' template='Horizontal_dropdown : my_nav' }
</div>
</div><!-- end topnav -->
<!-- End Horizontal Menu -->
<!-- Start sub nav -->
<div class="subnav"></div>
<!-- End sub nav -->
<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}<br>
<hr />
</div>
<!-- End Breadcrumbs -->
<!-- Start Content (Navigation and Content columns) -->
<div id="content" class="clearfix">
<!-- Start Sub Navigation -->
<!-- <div id="menu_vert">
<h2 class="accessibility">Sub Navigation</h2>
{cms_module module='menumanager' template='Horizontal_dropdown : ellnav-accessible' start_level='2' collapse='1'}
<hr />
</div> -->
<!-- End Sub Navigation -->
<!-- Start Content Area -->
<div id="main">
{content} <br />
</div>
<!-- End Content Area -->
<!-- Start Second Content Block -->
<div id="content2">
{content block='block1'}
<hr>
</p></center>
</div>
<!-- End Second Content Block -->
</div>
<!-- End Content -->
<!-- Start Footer -->
<div id="footer" class="clearfix">
{global_content name='footer'}
</div>
<!-- End Footer -->
</div><!-- end container -->
</div><!-- end pagewrapper -->
<__body>
</__html>
Code: Select all
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */
/* NAV */
* html div#menu_horiz {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#menu_horiz {
width: 781px;
margin: 0;
text-align: center;
border-right: solid 1px #cccccc;
}
div#menu_horiz ul {
margin: 0;
padding: 0;
list-style: none;
border-left: px solid #C0C0C0;
div#menu_horiz ul li {
background-color: #000;
}
div#menu_horiz li {
float: left;
display: inline;
list-style: none;
margin: 0 ;
border-right: px solid #C0C0C0;
}
}
div#menu_horiz li a {
border-right: none;
}
div#menu_horiz a,
div#menu_horiz a:link,
div#menu_horiz a:active,
div#menu_horiz a:visited {
display: block;
padding: 5px 10px;
/* hide from ie/mac \*/
display: block;
/* end hide */
background: url(uploads/Horizontal_dropdown/nav_bg.jpg) repeat 0 0px;
text-decoration: none;
margin: 0;
color: #fff;
/*background: #F68F3A;*/
font-weight: bold;
}
div#menu_horiz li a:hover {
background: url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
background-color: #D10D40;
color: #FFF;
line-height: 1em;
font-weight: bold;
}
div#menu_horiz .activeparent {
display: inline-block;
/* hide from ie/mac \*/
display: block;
/* end hide */
background-color: #D10D40;
}
div#menu_horiz .current a,
div#menu_horiz .current a:link,
div#menu_horiz .current a:active,
div#menu_horiz .current a:visited,
div#menu_horiz .current a:hover,
div#menu_horiz .activeparent a,
div#menu_horiz .activeparent a:link,
div#menu_horiz .activeparent a:active,
div#menu_horiz .activeparent a:visited,
div#menu_horiz .activeparent a:hover
{
background-color: #D10D40;
}
/* END NAV */
div#menu_horiz li.active01 h3 {
display: inline-block;
padding: 5px 10px;
background: url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
/* hide from ie/mac \*/
display: block;
/* end hide */
font-size: 1em;
line-height: 1em;
text-decoration: none;
margin: 0;
color: #ffffff;
background-color: #D10D40;
}
#menu_horiz li.active02 h3 {
display: block;
text-decoration: none;
padding: 5px 5px 5px 10px;
font-weight: normal;
color: #18507C;
margin: 0;
font-size: 1em;
background-color: #D10D40;
}
#menu_horiz li.active03 h3
{
display: block;
padding: 3px 5px 3px 25px;
border-bottom: none;
font-size: 90%;
font-weight: bold;
color: #D10D40;
margin: 0;
}