problems with submenu using master template

Gitte 4 posts 24 karma points

Jan 31, 2010 @ 14:08

Problems with submenu using Master Template

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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Problems with submenu using Master Template