We Keep Coding

Generate menu dynamically using c# in asp.net with css for parent and sub menu

I generate following structure for menu dynamically using recursive function.
<ul >
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Menu 2.1</li>
<li>Menu 2.2</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5
<ul >
<li>Menu 5.1</li>
<li>Menu 5.2</li>
</ul>
</li>
<li>Menu 6</li>
</ul>
I want to generate same with saperate class for parent menu & sub menu as
<ul class="nav parent-menu">
<li>Home</li>
<li>Menu 1</li>
<li class="dropdown" >Menu 2
<ul class="sub-menu">
<li>Menu 2.1</li>
<li>Menu 2.2</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li class="dropdown">Menu 5
<ul class="sub-menu">
<li>Menu 5.1</li>
<li>Menu 5.2</li>
</ul>
</li>
<li>Menu 6</li>
</ul>
I need to add three different classes nav parent-menu class="dropdown" class="sub-menu"
C# Code
Not sure where i should should change the code to make it work.
private string GenerateMenu(DataRow[] menu, DataTable table, StringBuilder sb)
{
sb.AppendLine("<ul class='nav navbar-nav'>");
if (menu.Length > 0)
{
foreach (DataRow dr in menu)
{
string menuName = dr["MenuName"].ToString();
string menuURL = dr["MenuURL"].ToString();
string line = string.Empty;
line = String.Format(#"<li>" + menuName + "", handler, menuName);
sb.Append(line);
string pid = dr["MenuId"].ToString();
string parentId = dr["MenuInheritance"].ToString();
DataRow[] subMenu = table.Select(String.Format("MenuInheritance = {0}", pid));
if (subMenu.Length > 0 && !pid.Equals(parentId))
{
var subMenuBuilder = new StringBuilder();
sb.Append(GenerateMenu(subMenu, table, subMenuBuilder));
}
sb.Append("</li>");
}
}
sb.Append("</ul>");
return sb.ToString();
}
//Call Function
GenerateMobileUL(parentMenus, table, sbMobile);
Table Structure
MenuID
MenuName
MenuURL
MenuInheritance
MenuNewPage

Copy And Paste and name it as Menu.css
#cssmenu {
position: relative;
background:#DCDCDC;
width:100%;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background:Skyblue;
width: 100%;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family:Times New Roman;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 16px;
font-weight: bold;
padding: 15px 10px;
color: Black;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 0.5px solid #eeeeee;
padding: 10px 20px;
font-size: 14px;
color: Black;
background:#DCDCDC;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #ffffff;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #9ea2a5;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu.align-center ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: none;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul > li:hover > ul,
#cssmenu.align-right ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
padding-right: 0;
right: auto;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 12px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 0.5px solid rgba(150, 150, 150, 0.1);
}
#cssmenu ul ul::after {
display: none;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 0px solid #7a8189;
border-bottom: 0px solid #7a8189;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 0px solid #7a8189;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
}
In form
<table width="100%">
<td style="width: 200px" valign="top">
<div id="cssmenu">
<ul id="">
<li><span>Admin</span>
<ul>
<li>Test1</li>
</ul>
</li>
<li><span>Master</span>
<ul>
<li>test2</li>
</ul>
</li>
<li class="dropdown"><span>test</span>
<ul>
<li>Test2
<ul>
<li>Test2-test
</ul>
</li>
</ul>
</li>
</ul>
</div>
</td>
</table>
Use For Has Sub else Avoid
<script>
(function($) {
$(document).ready(function() {
$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
var activeElement = $('#cssmenu>ul>li:first');
$('#cssmenu>ul>li').each(function() {
if ($(this).hasClass('active')) {
activeElement = $(this);
}
});
var posLeft = activeElement.position().left;
var elementWidth = activeElement.width();
posLeft = posLeft + elementWidth / 2 - 6;
if (activeElement.hasClass('has-sub')) {
posLeft -= 6;
}
$('#cssmenu #pIndicator').css('left', posLeft);
var element, leftPos, indicator = $('#cssmenu pIndicator');
$("#cssmenu>ul>li").hover(function() {
element = $(this);
var w = element.width();
if ($(this).hasClass('has-sub')) {
leftPos = element.position().left + w / 2 - 12;
}
else {
leftPos = element.position().left + w / 2 - 6;
}
$('#cssmenu #pIndicator').css('left', leftPos);
}
, function() {
$('#cssmenu #pIndicator').css('left', posLeft);
});
$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
$("#menu-button").click(function() {
if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open');
}
else {
$(this).parent().addClass('open');
}
});
});
})(jQuery);
</script>

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Page Permission Comfig Form</div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<div class="col-lg-4 col-md-4 col-sm-4">
<label>User Type
<select id="txtusertype" class="form-control">
<option value="ALL">Select user type</option>
</select>
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" >
<div class="col-lg-12 col-md-12 col-sm-12" id="getlist">
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<input type="button" class="btn btn-success " value="Save" onclick="SaveRecords();" />
</div>
<asp:HiddenField ID="MailMenuList" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="SubMenuList" runat="server" ClientIDMode="Static"/>
</div>
</div>
</div>
</div>
</div>
//page load function
$(document).ready(function () {
getusertype();
GetPagNameAll();
})
//get all page name in db menu and sub menu type display
function GetPagNameAll() {
$.ajax({
type: "POST",
url: "/PagePermission/PagePermission.aspx/getDisplayALLPageName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var jsdata = JSON.parse(msg.d);
// var SubMenu = jsdata.SubMenuList;
$.each(jsdata, function (key, value) {
$("#MailMenuList").val(value.mainmenulist);
$("#getlist").append('<ul style="padding:5px"><li><input type="checkbox" id="main' + value.id + '" value="' + value.id + '" onclick="Maincheck_fun(' + value.id + ');"/>' + value.pagename)//onclick="checkSubMenufun(' + value.id + ');" onclick="check_fun(\'' + value.id + ',' + value.SubMenuList +'\');"
//'<ul><input type="checkbox" id="' + value.id + '" value="' + value.pagename + '" />"' + value.pagename+'"'
var sub_length=value.SubMenuList.length;
for (i = 0; i < sub_length; i++) {
//'<li><input type="checkbox" id="' + value.id + '" value="' + value.pagename + '" />"' + value.pagename+'"</li>'
$("#getlist").append('<ul><li><input type="checkbox" id="sub' + value.SubMenuList[i].id + '" class="cl_name' + value.id + '" value="' + value.SubMenuList[i].id + '" onclick="Subcheck_fun(' + value.id + ',' + value.SubMenuList[i].id + ');"/>' + value.SubMenuList[i].pagename + '</li><ul>')//onclick="checkUncheckMainMenufun(' + value.id + ',' + value.SubMenuList[i].id + ');"
}
'<li></ul>';
});
},
failure: function (msg) {
alert("failure");
},
error: function (msg) {
alert("error");
}
});
}
//get drop down values in db
function getusertype() {
$.ajax({
type: "POST",
url: "/PagePermission/PagePermission.aspx/GetUserType",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$('#txtusertype').empty().append('<option value="ALL">Select user type</option>');
var jsdata = JSON.parse(msg.d);
$.each(jsdata, function (key, value) {
$('#txtusertype').append('<option value="' + value.Sno + '">' + value.pagename + '</option>');
});
//$(".side-menu").empty();
},
failure: function (msg) {
alert("failure");
},
error: function (msg) {
alert("error");
}
});
}
#region Select Drobdowm List
[WebMethod]
public static string GetUserType()
{
try
{
registerEntities1 db = new registerEntities1();
var usertype = db.user_type_table.Select(x => new { x.user_id, x.user_name }).ToList();
List<details> obj = new List<details>();
foreach (var append in usertype)
{
details objd = new details();
objd.pagename = append.user_name;
objd.Sno = append.user_id.ToString();
obj.Add(objd);
}
JavaScriptSerializer objsr = new JavaScriptSerializer();
return objsr.Serialize(obj);
//return "";
}
catch (Exception ex)
{
return "";
}
}
#endregion
#region display all page name in page load
[WebMethod]
public static string getDisplayALLPageName()
{
registerEntities1 db = new registerEntities1();
var main_menu_list = db.page_name_table.Select(x => new { x.page_id, x.page_name }).ToList();
var sub_menu_list = db.page_name_submenu.Select(x => new { x.page_id, x.page_name, x.main_menu_id }).ToList();
List<mainMenu> MainMenuList = new List<mainMenu>();
foreach (var main_menu in main_menu_list)
{
List<subMenu> SubMenuList = new List<subMenu>();
mainMenu mainMenuDetails = new mainMenu();
foreach (var sub_menu in sub_menu_list)
{
subMenu sunMenuDetails = new subMenu();
if (main_menu.page_id == sub_menu.main_menu_id)
{
sunMenuDetails.id = sub_menu.page_id.ToString();
sunMenuDetails.pagename = sub_menu.page_name;
sunMenuDetails.menutype = "Sub menu";
//sunMenuDetails.submenulist = sub_menu_list.Count.ToString();
SubMenuList.Add(sunMenuDetails);
}
}
mainMenuDetails.id = main_menu.page_id.ToString();
mainMenuDetails.pagename = main_menu.page_name;
mainMenuDetails.menutype = "main Menu";
mainMenuDetails.SubMenuList = SubMenuList;
mainMenuDetails.mainmenulist = main_menu_list.Count.ToString();
MainMenuList.Add(mainMenuDetails);
}
JavaScriptSerializer objsr = new JavaScriptSerializer();
return objsr.Serialize(MainMenuList);
}
endregion

Custom CSS on ASP.Net menu not applying

I am working on a custom menu control in ASP.Net.
I've created a separate new project on ASP.Net webform c# for menu and finally get the desire output which I want.
Desire Output
Now when I put menu control css and other HTML code in my running application which is on VB.Net then all custom css was gone and ASP.Net default CSS Classes override it. Below is my current output:
Here is my masterpage code:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu
ID="Menu"
runat="server"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
OnMenuItemDataBound="OnMenuItemDataBound"
IncludeStyleBlock="false"
StaticEnableDefaultPopOutImage="false"
CssClass="AHMenu">
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="AHlevel1" />
<asp:SubMenuStyle CssClass="AHlevel2" />
<asp:SubMenuStyle CssClass="AHlevel3" />
<asp:SubMenuStyle CssClass="AHlevel4" />
</LevelSubMenuStyles>
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="AHlevel1Style" />
<asp:MenuItemStyle CssClass="AHlevel2Style" />
<asp:MenuItemStyle CssClass="AHlevel3Style" />
<asp:MenuItemStyle CssClass="AHlevel4Style" />
</LevelMenuItemStyles>
</asp:Menu>
In browser view source all my CSS gone and override with default CSS. As shown below:
Here is my CSS:
#Menu > ul.AHlevel1 > li:hover {
background-color: white;
}
#Menu > ul.AHlevel1 > li:hover a.AHlevel1Style {
color: black !important;
}
.AHMenu {
float: none !important;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: #1965b0;
}
.AHMenu * {
float: none !important;
}
.AHMenu a:hover {
text-decoration: none;
}
.AHMenu .AHlevel1Style {
cursor: pointer;
color: white;
}
.AHMenu .AHlevel2Style, .AHMenu .AHlevel3Style, .AHMenu .AHlevel4Style {
color: #1965b0;
}
.AHMenu .AHlevel4Style {
cursor: pointer;
}
.AHMenu .AHlevel1 {
order: 0;
margin-bottom: 0;
padding: 0;
width: inherit !important;
}
.AHMenu .AHlevel1 li {
display: inline-block;
position: static !important;
padding: 12px;
}
.AHMenu .AHlevel2 {
/*display: block !important;*/
background: white;
width: inherit !important;
padding: 0 40px;
border: 1px solid #1965b0;
border-top: none;
/*border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;*/
height: 250px;
}
.AHMenu .AHlevel2 li {
display: inline-block;
position: relative !important;
width: 200px;
padding: 12px 0;
padding-bottom: 0;
}
.AHMenu .AHlevel3 {
display: block !important;
padding: 0;
background: white;
left: 0 !important;
top: 70px !important;
border-bottom: 2px solid #1965b0;
}
.AHMenu .AHlevel3 li {
font-weight: 700;
font-family: calibri;
font-size: 19px;
display: inline-block;
position: initial;
width: auto;
margin: 6px 0;
padding: 0;
}
.AHMenu .AHlevel4 {
display: block !important;
padding: 0;
background: white;
left: 22px !important;
top: 38px !important;
}
.AHMenu .AHlevel4 li {
font-family: calibri;
font-size: 14px;
display: inline-block;
position: initial;
width: auto;
padding: 0;
margin: 0;
font-weight: 300;
white-space: nowrap;
}
.AHMenu .AHlevel4 li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #1965b0;
}
#AHMenu::after {
content: '';
flex-grow: 1;
order: 0;
}

I have converted static menu code to dynamic menu code

I have converted static code to dynamic my static is working well but in dynamic mouser-hover effect has stop working when I do mouse hover it will show me sub menu.
<head runat="server">
<title></title>
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428bca;
}
li
{
float: left;
}
li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn
{
background-color: inherit;
}
li.dropdown
{
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li class="dropdown">MY ARTICLES
<div class="dropdown-content">
Aapnu Surat ચોકલેટી અભિનેતા વિનોદ મેહરા <a href="#">
ઋષિસમાન સંગીતકાર સચિનદેવ બર્મન</a>
</div>
</li>
<li class="dropdown">MY PRESENTATIONS
<div class="dropdown-content">
Safaltani Sargam Part I Safaltani Sargam Part II
The Art Of Illusion <a href="#">100 Years Of Indian Cinema - Part I
Silent Film Era</a>
</div>
</li>
<li class="dropdown">DRAMA
<div class="dropdown-content">
Result Of SMC Drama Contest RESULTS OF 39th SMC DRAMA CONTEST
The Result Of SMC Drama Contest 2012 An Enemy Of The People
</div>
</div> </li>
<li class="dropdown">GUJARAT
<div class="dropdown-content">
Link 1વી ધ પીપલ ઓફ ગુજરાત
</li>
<li class="dropdown">INDIAN CULTURE
<div class="dropdown-content">
The Vedic Culture - Guj
</div>
</li>
</ul>
</form>
</body>
</html>
Select all
Open in new window
this is for static
<style>
/* ul */
.submenu
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428bca;
}
.submenu li
{
float: left;
}
.submenu li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 12px 36px;
text-decoration: none;
}
.submenu li a:hover, .dropdown:hover .dropbtn
{
background-color: inherit;
}
.submenu li.dropdown
{
display: inline-block;
}
.submenu .dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.submenu .dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.submenu .dropdown-content a:hover
{
background-color: #f1f1f1;
}
.submenu .dropdown:hover .submenu .dropdown-content
{
display: block;
}
</style>
<div class="Container">
<ul class="submenu" id="topicmenu" runat="server">
</ul>
</div>
private void fillMenu()
{
clsTopic objTopic = new clsTopic(true);
objTopic.SelectAll();
string str = string.Empty;
int i = 0;
for (i = 0; i < objTopic.ListclsTopic.Count; i++)
{
str +=#"<li class='dropdown'><a href='#' class='dropbtn' style='text-transform:uppercase;'>"+ objTopic.ListclsTopic[i].TopicName+#"</a></li>";
}
topicmenu.InnerHtml = str;
}
I want to convert it to dynamic coding I have converted it but when I do hover on menu I don't find sub menu.

Menu only works when double clicked, how do I get it to work with single click?

I have two problems. I am working on website with ASP.NET C#. My first problem is: I'm getting the menus at the top of the page from database. No problem so far. But when I one click on any menu name, nothing happens. When I double click on any menu name, it's working. I want to work when I one click it. How can I fix this problem?
Here is my main.Master page code:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="main.master.cs" Inherits="ThalesBilisimWebSitesi.main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap" class="colorskin-0">
<div id="sticker">
<header id="header">
<div class="container">
<nav id="nav-wrap" class="nav-wrap1 twelve columns">
<ul id="nav">
<asp:Repeater ID="rptMenu" runat="server" OnItemDataBound="rptMenu_OnItemBound">
<ItemTemplate>
<li>
<a href="<%#Eval("MenuLink")%>">
<%#Eval("MenuName") %>
</a>
<ul>
<asp:Repeater ID="rptChildMenu" runat="server">
<ItemTemplate>
<li>
<a href="<%#Eval("MenuLink")%>">
<%#Eval("MenuName") %>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</nav>
</div>
</header>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
My second problem is: When the mouse hovers over the menu, a gap occurs as the picture. How do I get rid of it?
Here is a screenshot.
Edit: CSS.
/* NAVIGATION BAR */
.nav-wrap1, .nav-wrap2 { height:110px; position:relative; }
.nav-wrap2 { height:77px; border-top:1px solid #f0f0f0; margin-bottom:-4px; border-bottom:4px solid #f3f3f3; }
.nav-wrap2.mn4 { height:50px; }
/* menu icon */
#menu-icon { display: none; /* hide menu icon initially */}
#nav { float:right;}
#nav li { list-style: none; float:left; display:block; height:100%; vertical-align:middle; }
/* nav link */
#nav a { display: block; font-family: 'Roboto', sans-serif; font-size: 14px; line-height:24px; font-weight:600; padding: 70px 16px 16px; color: #777; outline: 0; text-align: left; background-color:#fff; opcity:1; text-align:center; -webkit-transition:background .15s ease-in-out; -moz-transition:background .15s ease-in-out; -ms-transition:background .15s ease-in-out; -o-transition:background .15s ease-in-out; transition:background .15s ease-in-out; }
#nav a:hover, #nav li:hover > a { background-color:#f0f0f0; }
#nav a i { font-size:16px; line-height:16px; display:inline; color:inherit; margin-right:4px; vertical-align:baseline;}
#nav > li > a i { margin-right:6px; font-weight:normal;}
#nav > li.current:after { display:block; float:left; content:""; width:100%; height:4px; background:#7cbc20; bottom:0px; margin-bottom:-4px;}
/* nav link Header2 */
.nav-wrap2 #nav { float:left; margin-bottom:0; }
.nav-wrap2 #nav li { margin:0; }
.nav-wrap2 #nav > li > a { padding: 20px 20px 15px; font-size: 15px; line-height:18px; font-weight:400; text-align:left; border-right:1px solid #eee; }
.nav-wrap2 #nav > li:first-child > a { border-left:1px solid #eee;}
#nav a span, #nav a:after { margin-top:6px; display:block; font-size:11px; color:#919191; text-transform:lowercase; font-weight:400; }
#nav a:after { content: attr(data-description);}
.nav-wrap1 #nav a:after, .nav-wrap2.mn4 #nav a:after { content:""; display:none; }
.nav-wrap2.mn4 #nav > li > a { padding:16px 20px;}
.nav-wrap2.darknavi { background: #333; border-top:2px solid #202020; border-bottom-color: #222;}
.nav-wrap2.darknavi #nav > li > a { color:#fff; background:#333; border-color:#222;}
.nav-wrap2.darknavi #nav > li > a:hover, .nav-wrap2.darknavi #nav > li:hover > a { background-color:#222;}
.nav-wrap2.darknavi #nav ul { border-color:#222;}
/* nav link fixes */
.homedark #nav > li > a, .darkhalf #nav > li > a { background:transparent; color:#fff;}
.homedark #nav > li:hover > a, .darkhalf #nav > li:hover > a { background:#f0f0f0; color:#777;}
.homedark .is-sticky #nav > li > a, .darkhalf .is-sticky #nav > li > a { color:#777;}
.is-sticky #header #nav > li > a:link { background:inherit;}
.is-sticky #header #nav > li:hover > a { background:#f0f0f0;}
#header.super-fixed #nav > li > a { padding:0 16px; line-height:90px;}
#header.super-fixed #nav > li > a:after { display:none; content:"";}
#header.super-fixed #nav > li.current > a { color:#7cbc20;}
#header.super-fixed #nav > li.current:after { display:none; height:0;}
#header.super-fixed .nav-wrap1 { height:90px;}
/* nav dropdown */
#nav ul { position: absolute; width: 182px; background: #fff ; padding: 5px 0; padding-left: 20px; margin:0; border: 4px solid #e2e2e2; z-index:91000; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; display: none; /* hide dropdown */ }
#nav > li:last-child ul { left:auto; right:0;}
.nav-wrap2 #nav > li:last-child ul { right:auto;}
#nav ul li { float: none; border-bottom:1px solid #efefef; display:block; position:relative; margin: 0; padding:0; }
#nav ul li:last-child { border:none;}
#nav ul li a, #nav ul li:hover > a { background:#fff; color:#777; width:auto; display:block; text-align:left; padding: 9px 11px 9px 0; border-radius:0; font-size:13px; font-weight:400; border:0 none; text-transform:capitalize; line-height:24px; height:24px; }
#nav ul li a:hover, #nav li.current ul li a:hover, .nav-wrap2 #nav ul li a:hover, .nav-wrap2.darknavi #nav ul li a:hover, #nav ul li.current > a , #nav ul li:hover > a { color:#7cbc20; }
#nav li:hover > ul { display: block; visibility:visible; /* show dropdown on hover */}
#nav ul li ul { margin:-44px 0 0 182px; width:170px; }
#nav li.submenu:after { font-family: 'FontAwesome'; content: "\f054"; position:absolute; color:#cdcdcd; font-size:8px; display:inline; speak: none; cursor:pointer; right:9px; top:12px;}
#nav ul.mega, #nav > li:last-child ul.mega { width:100%; left:0; float:left;}
#nav ul.mega ul { float:none; border:none; width:auto; position:static; left:auto; right:auto; display:block; padding:0; margin:0;}
#nav ul.mega div:last-child { margin-right:0 !important;}
#nav h4.subtitle { margin:14px 0; border-color:#e2e2e2; border-width:2px;}
#nav img { max-width:100%; margin-bottom:10px;}
#nav p { font-size:13px; font-weight:400; color:#747474;}
#header #nav h6 { margin:0; margin-bottom:7px; color:#555;}
#nav .sendbtn { padding:7px 20px; font-size:13px;}
/* nav dropdown for(ie7) */
*+html #nav li { position:relative; display:block; }
*+html #nav li ul, *+html #nav li.current ul { left:0; clear:both; position:absolute; border:1px solid #d4d4d4; }
*+html .container { z-index:2; }
*+html #header { z-index:3; position:relative; }
*+html #nav ul li ul { position:absolute; left:0; margin-top:-31px; display:none; visibility:hidden; }
*+html #nav ul li:hover > ul { display:block; visibility:visible; }
/* --------------------- */
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
/* nav-wrap */
#nav-wrap { position: relative; height:30px; text-align:center; margin:0 0 32px 0; }
#header.super-fixed .nav-wrap1 { height:30px; }
/* menu icon */
#menu-icon { color: rgba(255,255,255,0.7); margin:0 auto; width: 246px; font-size:16px; font-weight:400; height: 30px; border-radius:2px; background: #363f46; padding: 11px 10px 3px 42px; cursor: pointer; clear:both; box-shadow: 0 2px 2px -2px rgba(0,0,0,0.3); text-align:left; display: block; /* how menu icon */ }
#menu-icon i { font-size:16px; color:rgba(0,0,0,0.6); float:left; margin-left:-28px; margin-top:3px; }
#menu-icon:hover, #menu-icon.active { background-color: #0093d0; }
.mn-clk { font-size:12px; color:rgba(255,255,255,0.5);}
/* main nav */
#nav { clear: both; margin:0 auto; background:#fff; left:1px; position: absolute; width: 278px; z-index: 10000; padding:2px 0 44px 18px; border: 1px solid #d2d2d2; border-top:0 none; display: none; /* visibility will be toggled with jquery */ }
#nav ul { padding:5px 0;}
#nav li, .nav-wrap2 #nav li { clear: both; float: none; border:0 none; margin:0; margin-left:10px; padding:0 !important; border-bottom:1px solid #e5e5e5; }
#nav ul li:last-child, .nav-wrap2 #nav ul li:last-child { border:none;}
#nav a, .nav-wrap2 #nav > li > a, .nav-wrap2.mn4 #nav li a, #header.super-fixed #nav > li > a { padding:14px 0 12px; line-height:24px;}
#nav a, #nav ul a, .nav-wrap2 #nav > li > a, .nav-wrap2.mn4 #nav li a, #header.super-fixed #nav > li > a { width:auto; height:20px; display:block; text-align:left; border:0 none; margin:0; line-height:1.2; }
.nav-wrap2 #nav > li > a , .nav-wrap2 #nav > li:first-child > a { border:0 none; }
.nav-wrap2 #nav > li > a { font-size:14px; font-weight:600;}
.nav-wrap2.darknavi #nav > li > a, .homedark #nav > li > a, .darkhalf #nav > li > a { color:#777;}
#nav a span, #nav a:after { display:none; visibility:hidden; }
#nav > li.current:after { display:none;}
#nav a { background-color:#fff !important;}
.darkhalf #sticker { position:relative !important; height:auto; background:#fff;}
.darkhalf section.homedark { margin-top:0;}
/* dropdown */
#nav li ul { display:none; margin:0; padding:0; padding-left:10px; }
#nav.ie10mfx li ul { display:block;}
#nav a:hover > #nav li ul{ display:block; }
#nav ul { width: auto; margin:0; box-shadow: none; position: static; display: block; border: none; }
#nav ul li ul { margin:0; display: block; width: auto; padding:0; padding-left:10px; }
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block; }
#nav li.submenu:after {content: "\f078"; }
.nav-wrap2, .nav-wrap2.darknavi { border:0 none; box-shadow:0 0 0 0; background:none;}
#nav ul.mega, #nav ul.mega div, #nav ul.mega, #nav > li:last-child ul.mega { width:auto; max-width:100%; clear:both; float:none;}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
#nav { left:61px;}
}
/* End
--------------------- */

Try changing your markup to this:
<a href='<%#Eval("MenuLink")%>'>
<%#Eval("MenuName") %>
</a>
As for the gap, use your browser tools to identify the vertically expanding container and add an overflow:hidden; to your CSS class. Better still, check the padding and margins being applied because the math is probably wrong in relation to the intended height.

<asp.net Menu control> selected item stylesheet is not able to apply

i am facing strange problem that i am not able to add stylesheet as selected item :
my html is like this :
<asp:Menu ID="Menu2"
runat="server"
Orientation="Horizontal"
DisappearAfter="10"
CssClass="art-hmenu"
DataSourceID="XmlDataSource1"
IncludeStyleBlock="false"
StaticEnableDefaultPopOutImage="False">
<StaticSelectedStyle CssClass="selected"/>
<DataBindings>
<asp:MenuItemBinding DataMember="Item" NavigateUrlField="Url" TextField="Text" />
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" />
code behind is like this :
public partial class Menu : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SelectRighMenuItem();
}
}
/// <summary>
///
/// </summary>
void SelectRighMenuItem()
{
string appDataPath = HttpContext.Current.Server.MapPath("~/App_Data");
this.XmlDataSource1.DataFile = appDataPath + "\\" + GetRole() + "_menu.xml";
this.XmlDataSource1.XPath = #"/Items/Item";
}
protected string GetRole()
{
string role = string.Empty;
role = Session["Roles"].ToString();
return role;
}
}
what i tried is :
$(".art-hmenu>ul>li").on("click", "a", function (event) {
debugger;
$(this).addClass("selected");
});
but this is not working !!
i also try to set StaticSelectedStyle!! but also not working!
stylesheet is i am using is :
/* menu structure */
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover {
outline: none;
position: relative;
z-index: 11;
}
.active {
color:green;
background-color:yellow;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
ul.art-hmenu li:hover {
z-index: 10000;
white-space: normal;
}
ul.art-hmenu li li {
float: none;
width: auto;
}
ul.art-hmenu li:hover > ul {
visibility: visible;
top: 100%;
}
ul.art-hmenu li li:hover > ul {
top: 0;
left: 100%;
}
ul.art-hmenu:after, ul.art-hmenu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu ul {
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-left-to-right {
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-right-to-left {
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.art-hmenu ul ul {
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
z-index: -1;
}
ul.art-hmenu ul ul.art-hmenu-left-to-right {
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
}
ul.art-hmenu ul ul.art-hmenu-right-to-left {
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
}
ul.art-hmenu li li:hover > ul.art-hmenu-left-to-right {
right: auto;
left: 100%;
}
ul.art-hmenu li li:hover > ul.art-hmenu-right-to-left {
left: auto;
right: 100%;
}
ul.art-hmenu {
position: relative;
padding: 3px 3px 3px 3px;
float: left;
}
/* end menu structure */
/* menu bar */
.art-nav {
min-width: 700px;
max-width: 1728px;
margin: 0 auto;
min-height: 36px;
z-index: 100;
margin: 0 0 -36px;
width: auto;
top: 214px;
}
.art-nav:before, .art-nav:after {
background-image: url('images/nav.png');
}
.art-nav:before {
right: 0;
}
.art-nav:after {
width: 0;
}
/* end menu bar */
.art-nav-outer {
position: absolute;
width: 100%;
}
.art-nav-wrapper {
position: relative;
margin: 0 auto;
width: auto;
}
.art-nav-inner {
margin: 0 4px;
}
/* end Menu */
/* begin MenuItem */
ul.art-hmenu > li > a {
position: relative;
display: block;
height: 30px;
cursor: pointer;
text-decoration: none;
color: #D2E4EE;
padding: 0 20px;
line-height: 30px;
text-align: center;
}
ul.art-hmenu > li > a:before, ul.art-hmenu > li > a:after {
position: absolute;
display: block;
content: ' ';
top: 0;
bottom: 0;
z-index: -1;
background-image: url('images/menuitem.png');
}
ul.art-hmenu > li > a:before {
left: 0;
right: 12px;
background-position: top left;
}
ul.art-hmenu > li > a:after {
width: 12px;
right: 0;
background-position: top right;
}
.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover {
text-align: left;
text-decoration: none;
}
ul.art-hmenu > li > a.active:before {
background-position: bottom left;
}
ul.art-hmenu > li > a.active:after {
background-position: bottom right;
}
ul.art-hmenu > li > a.active {
color: #000000;
}
ul.art-hmenu > li > a:hover:before, ul.art-hmenu > li:hover > a:before {
background-position: center left;
}
ul.art-hmenu > li > a:hover:after, ul.art-hmenu > li:hover > a:after {
background-position: center right;
}
ul.art-hmenu > li > a:hover, ul.art-hmenu > li:hover > a {
color: #D9E0E8;
}
/* end MenuItem */
/* begin MenuSeparator */
ul.art-hmenu > li:before {
position: absolute;
display: block;
content: ' ';
top: 0;
left: -13px;
width: 13px;
height: 30px;
background: url('images/menuseparator.png') center center no-repeat;
}
ul.art-hmenu > li {
margin-left: 13px;
}
ul.art-hmenu > li:first-child {
margin-left: 0;
}
ul.art-hmenu > li:first-child:before {
display: none;
}
/* end MenuSeparator */
/* begin MenuSubItem */
.art-hmenu ul a {
display: block;
white-space: nowrap;
height: 24px;
background-image: url('images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-top-width: 0;
border-color: #99ADC2;
min-width: 7em;
text-align: left;
text-decoration: none;
line-height: 24px;
color: #152B38;
margin: 0;
padding: 0 8px;
}
.art-hmenu ul > li:first-child > a {
border-top-width: 1px;
}
.art-hmenu ul a:link , .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active {
text-align: left;
text-decoration: none;
line-height: 24px;
color: #152B38;
margin: 0;
padding: 0 8px;
}
.art-hmenu ul a:link .highlighted {
color: #152B38;
background-color: #fff;
}
.art-hmenu ul li a:hover {
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
.art-hmenu ul li a.art-hmenu-before-hovered {
border-bottom-width: 0 !important;
}
.art-hmenu ul li:hover > a {
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
.art-hmenu ul li:hover > a.selected
{
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
.SelectedMenuItem
{
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
/* end MenuSubItem */