<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">
<li class="dropdown"></li>
</ul>
</div>
private void fillMenu()
{
clsTopic objTopic = new clsTopic(true);
objTopic.SelectAll();
clsArtical objArtical = new clsArtical(true);
objArtical.SelectAll();
string str = string.Empty;
int i = 0;
int j = 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>";
for (j = 0; j < objArtical.ListclsArtical.Count; j++)
{
if (objArtical.ListclsArtical[j].TopicID == objTopic.ListclsTopic[i].TopicID)
{
str += @"<div class='dropdown-content'><a href='#'>" + objArtical.ListclsArtical[j].ArticalName + "</a></div></li>";
}
}
}
topicmenu.InnerHtml = str;
}
This my dynamic coding code
<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>
<body>
<form id="form1" runat="server">
<ul>
<li class="dropdown"><a href="#" class="dropbtn">MY ARTICLES</a>
<div class="dropdown-content">
<a href="#">Aapnu Surat</a> <a href="#">ચોકલેટી અભિનેતા વિનોદ મેહરા</a> <a href="#">
ઋષિસમાન સંગીતકાર સચિનદેવ બર્મન</a>
</div>
</li>
<li class="dropdown"><a href="#" class="dropbtn">MY PRESENTATIONS</a>
<div class="dropdown-content">
<a href="#">Safaltani Sargam Part I</a> <a href="#">Safaltani Sargam Part II</a>
<a href="#">The Art Of Illusion</a> <a href="#">100 Years Of Indian Cinema - Part I
Silent Film Era</a>
</div>
</li>
<li class="dropdown"><a href="#" class="dropbtn">DRAMA</a>
<div class="dropdown-content">
<a href="#">Result Of SMC Drama Contest</a> <a href="#">RESULTS OF 39th SMC DRAMA CONTEST</a>
<a href="#">The Result Of SMC Drama Contest 2012</a> <a href="#">An Enemy Of The People</a>
</div>
</div> </li>
<li class="dropdown"><a href="#" class="dropbtn">GUJARAT</a>
<div class="dropdown-content">
<a href="#">Link 1વી ધ પીપલ ઓફ ગુજરાત</a>
</li>
<li class="dropdown"><a href="#" class="dropbtn">INDIAN CULTURE</a>
<div class="dropdown-content">
<a href="#">The Vedic Culture - Guj</a>
</div>
</li>
</ul>
</form>
</body>
this are static code
