I have a masterpage with the following markup
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="zola.master.vb" Inherits="WebApplication1.zola" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="UTF-8"/>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="icon" type="image/ico" href="favicon.ico"/>
<!-- main stylesheet -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css"/>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="css/ie9.css"><![endif]-->
<!--[if lt IE 9]>
<script src="js/ie/html5shiv.min.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/lib/flot-charts/excanvas.min.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body class="bg_d">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<%--Framework scripts--%>
<asp:ScriptReference Path="~/js/jquery.min.js" />
<asp:ScriptReference Path="~/js/jquery-migrate.js" />
<asp:ScriptReference Path="~/bootstrap/js/bootstrap.min.js" />
<asp:ScriptReference Path="~/js/jquery.fademenu.js" />
<asp:ScriptReference Path="~/js/selectnav.min.js" />
<asp:ScriptReference Path="~/js/jquery.actual.min.js" />
<asp:ScriptReference Path="~/js/jquery.easing.1.3.min.js" />
<asp:ScriptReference Path="~/js/lib/powertip/jquery.powertip-1.1.0.min.js" />
<asp:ScriptReference Path="~/js/moment.min.js" />
<asp:ScriptReference Path="~/js/common.js" />
<asp:ScriptReference Path="~/js/lib/jquery-ui/jquery-ui-1.10.2.custom.min.js" />
<asp:ScriptReference Path="~/js/lib/jquery-ui/jquery.ui.touch-punch.min.js" />
<asp:ScriptReference Path="~/js/lib/colorbox/jquery.colorbox.min.js" />
<asp:ScriptReference Path="~/js/lib/fullcalendar/fullcalendar.min.js" />
<asp:ScriptReference Path="~/js/lib/flot-charts/jquery.flot.js" />
<asp:ScriptReference Path="~/js/lib/flot-charts/jquery.flot.resize.js" />
<asp:ScriptReference Path="~/js/lib/flot-charts/jquery.flot.pie.js" />
<asp:ScriptReference Path="~/js/lib/flot-charts/jquery.flot.orderBars.js" />
<asp:ScriptReference Path="~/js/lib/flot-charts/jquery.flot.tooltip.js" />
<asp:ScriptReference Path="~/js/lib/flot-charts/jquery.flot.time.js" />
<asp:ScriptReference Path="~/js/lib/carousel/plugin.min.js" />
<asp:ScriptReference Path="~/js/lib/wookmark/jquery.imagesloaded.min.js" />
<asp:ScriptReference Path="~/js/lib/wookmark/jquery.wookmark.min.js" />
<asp:ScriptReference Path="~/js/pages/dashboard.js" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript">
$(document).ready(function () {
$("#navcont > ul").attr("id", "mobile-nav");
});
</script>
<div class="main-wrapper">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div id="navcont">
<ul>
<li>One
<ul>
<li>Sub One</li>
</ul>
</li>
<li>Two</li>
</ul>
</div>
<%--</div>--%>
</div>
</div>
</div>
<!-- main content -->
<div class="container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
My problem is, the id is not being assigned to the ul as I have in the master page.
Is there anything I am missing? Any help will be appreciated.