從vb.net的數據庫中顯示子菜單

Question

我有一個HTML的菜單欄與CSS。一個菜單是國家。當鼠標懸停在菜單'國家'時，我想從數據庫中顯示所有縣名。

<li><a href="#">Country</a> 
    <ul> 
     <li><a href="">UAE</a></li> 
     <li><a href="">India</a></li> 
     <li><a href="">USA</a></li> 
    </ul> 

我手動鍵入此（阿聯酋，印度，美國）。我需要從數據庫

Answer 1

加載列表看看這個鏈接，其與子菜單的菜單的一個很好的例子

這只是純CSS和HTML，因爲我不是一個視覺基本人我不能爲你提供那部分代碼。

Here

#primary_nav_wrap 
 
{ 
 
\t margin-top:15px 
 
} 
 

 
#primary_nav_wrap ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
\t display:block; 
 
\t color:#333; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
\t font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
 
} 
 

 
#primary_nav_wrap ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item 
 
{ 
 
\t background:#ddd 
 
} 
 

 
#primary_nav_wrap ul li:hover 
 
{ 
 
\t background:#f6f6f6 
 
} 
 

 
#primary_nav_wrap ul ul 
 
{ 
 
\t display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#fff; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul ul li 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
#primary_nav_wrap ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 
#primary_nav_wrap ul ul ul 
 
{ 
 
\t top:0; 
 
\t left:100% 
 
} 
 

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
\t display:block 
 
}

<h1>Simple Pure CSS Drop Down Menu</h1> 
 
<nav id="primary_nav_wrap"> 
 
<ul> 
 
    <li class="current-menu-item"><a href="#">Home</a></li> 
 
    <li><a href="#">Menu 1</a> 
 
    <ul> 
 
     <li><a href="#">Sub Menu 1</a></li> 
 
     <li><a href="#">Sub Menu 2</a></li> 
 
     <li><a href="#">Sub Menu 3</a></li> 
 
     <li><a href="#">Sub Menu 4</a> 
 
     <ul> 
 
      <li><a href="#">Deep Menu 1</a> 
 
      <ul> 
 
       <li><a href="#">Sub Deep 1</a></li> 
 
       <li><a href="#">Sub Deep 2</a></li> 
 
       <li><a href="#">Sub Deep 3</a></li> 
 
       <li><a href="#">Sub Deep 4</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Deep Menu 2</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Sub Menu 5</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Country</a> 
 
    <ul> 
 
     <li><a href="#">UAE</a></li> 
 
     <li><a href="#">India</a></li> 
 
     <li><a href="#">USA</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Menu 3</a> 
 
    <ul> 
 
     <li class="dir"><a href="#">Sub Menu 1</a></li> 
 
     <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> 
 
     <ul> 
 
      <li><a href="#">Category 1</a></li> 
 
      <li><a href="#">Category 2</a></li> 
 
      <li><a href="#">Category 3</a></li> 
 
      <li><a href="#">Category 4</a></li> 
 
      <li><a href="#">Category 5</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Sub Menu 3</a></li> 
 
     <li><a href="#">Sub Menu 4</a></li> 
 
     <li><a href="#">Sub Menu 5</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Menu 4</a></li> 
 
    <li><a href="#">Menu 5</a></li> 
 
    <li><a href="#">Menu 6</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
</ul> 
 
</nav>