problems with submenu using master template

Gitte 4 posts 24 karma points

Jan 31, 2010 @ 14:08

Hi,

I am totally new at Umbraco. I have a menu in CSS like this:

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
.menu ul{
background:#06569D;
height:20px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
  float:left;
  padding:0px;
  }
.menu li a{
  background:#06569D;
  color:#ffffff;
  display:block;
  font-weight:normal;
  line-height:20px;
  margin:0px;
  padding:0px 20px;
  text-align:center;
  text-decoration:none;
  }
  .menu li a:hover, .menu ul li:hover a{
   background: #444444 url("../media/hover.gif") bottom center no-repeat;
   color:#FFFFFF;
   text-decoration:none;
   }
.menu li ul{
  background:#afafaf;
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:190px;
  z-index:200;
  /*top:1em;
  /*left:0;*/
  }
.menu li:hover ul{
  display:block;

  }
.menu li li {
  background:url('images/sub_sep.gif') bottom left no-repeat;
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:190px;
  }
.menu li:hover li a{
  background:none;

  }
.menu li ul a{
  display:block;
  height:20px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
  .menu li ul a:hover, .menu li ul li:hover a{
   background:#444444 url('../media/hover_sub.gif') center left no-repeat;
   border:0px;
   color:#ffffff;
   text-decoration:none;
   }
.menu p{
  clear:left;
  }

When I use the menu in a Template it is working fine but when I use a Master Template and a template referring to the Master, I can only see the toplevel navigation and not the 2nd level. It will only show level 1 in the menu.

This is the html in the template:

<div class="menu">
<ul>
<li><a href="http://www.mysite.com/page1.aspx" target="_self">Page1</a>
</li>
<li><a href="http://www.mysite.com/page2.aspx" target="_self">Page2</a>
<ul>
<li><a href="http://www.mysite.com/page2/subpage1.aspx" target="_self">Subpage1</a></li>
<li><a href="http://www.mysite.com/page2/subpage2.aspx" target="_self">Subpage2</a></li>
</ul>
</li>
</ul>

Can anyone tell me what I am doing wrong and what I can do to solve the problem?

Copy Link

Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib

Jan 31, 2010 @ 14:19

Could you put your master/child templates here as well? Might make it easier to spot the problem.

Copy Link

Gitte 4 posts 24 karma points

Jan 31, 2010 @ 15:33

I have inserted the html in the Master Template using my stylesheet. Under the Master Template I have created several templates e.g. frontpage and Content Page. Just for a test I have not insertet any content in the templates so they are just referring to the master looking like this:

<%@ Master Language="C#" MasterPageFile="/masterpages/Master.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderID="MasterContentPlaceHolder" runat="server">

</asp:Content>

When I use the same html directly in the Frontpage and not using a Master Template for the Frontpage it works, but not with the Master.

Copy Link

Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib

Jan 31, 2010 @ 19:08

What does you Master.master file look like?

Copy Link

Gitte 4 posts 24 karma points

Jan 31, 2010 @ 20:30

Okay, here it goes:

<%@ Master Language="C#" MasterPageFile="/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceholderID="ContentPlaceHolderDefault" runat="server">
<html xmlns="http://www.w3.org/1999/xhtml">

</head>

<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
    <td width="1000" height="146"><table width="1000" border="0" cellspacing="0" cellpadding="0">
    </table>
    <img src="media/logo.jpg" width="1000" height="146">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>

        <td width="100%"><div class="menu">
<ul>
<li><a href="http://www.mysite.com/page1.aspx" target="_self">Page1</a>
<ul>
<li><a href="http://www.mysite.com/page1/subpage1_1.aspx" target="_self">Subpage1</a></li>
<li><a href="http://www.mysite.com/page1/subpage1_2.aspx" target="_self">Subpage2</a></li>
</ul>
</li>
<li><a href="http://www.mysite.com/page2.aspx" target="_self">Page2</a>
<ul>
<li><a href="http://www.mysite.com/page2/subpage2_1.aspx" target="_self">Subpage2_1</a></li>
<li><a href="http://www.mysite.com/page2/subpage2_2.aspx" target="_self">Subpage2_2</a></li>
<li><a href="http://www.mysite.com/page2/subpage2_3.aspx" target="_self">Subpage2_3</a></li>
<li><a href="http://www.mysite.com/page2/subpage2_4.aspx" target="_self">Subpage2_4</a></li>
<li><a href="http://www.mysite.com/page2/subpage2_5.aspx" target="_self">Subpage2_5</a></li>
<li><a href="http://www.mysite.com/page2/subpage2_6.aspx" target="_self">Subpage2_6</a></li>
</ul>
</li>
</ul>
</div></td>

      </tr>
    </table>

</td>
</tr>

</body>
</html>
</asp:Content>

I have tried to change the link to the stylesheet with and without "/ in front but it doesn't change anything. Only level 1 in the menu are visible.

Copy Link

Gitte 4 posts 24 karma points

Jan 31, 2010 @ 21:14

Thanks Morten, for getting me on the right track! I have just compared my Master Template with a previous template which works and I can see that the head section html is different in the Master Template. I have changed it and now it works. Sorry for taking your time but I don't think that I would have compared the two if you haven't insisted of seeing the Master Template. I was so convinced that it was something with the Master and the stylesheet.

So thanks again :)

Copy Link

is working on a reply...

Flag this post as spam?

Problems with submenu using Master Template