Javascript asp.net网站的下拉菜单

我需要一个下拉菜单为我的asp.net网站，我可以有菜单项以及图像。我需要一个这样的。如果我将鼠标放在蓝色条上的任何菜单项上（狗、猫、其他宠物），将打开一个下拉菜单，其中包含菜单项和一些图像。我希望它水平扩展到全长。请建议我使用哪个控件

问候,，

---

阿西夫·哈米德（Asif Hameed）

我在谷歌上有过很好的体验。

搜索一下，我偶然发现了这个网站：

---

为我用于此目的的jquery下拉菜单提供了一个很好的教程。

稍微自定义它时支持多级和图像。

使用telerik菜单控件

---

给你一个简单的例子：

HTML:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">about</a>
        <div class="submenu">
            <div class="col1 border-right">
                <ul>
                    <li><a href="#">about link 1</a></li>
                    <li><a href="#">about link 2</a></li>
                    <li><a href="#">about link 3</a></li>
                    <li><a href="#">about link 4</a></li>
                </ul>                                    
            </div>
            <div class="col2 border-right">
                <img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
            </div>
            <div class="col3">
                <img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
            </div>
        </div>            
    </li>
    ...
    ...
    ...
</ul>

ul#menu { 
    width: 100%; 
    position: relative; 
    height: 30px; 
    background:#ccc;
    border-bottom: 1px solid #666;        
}

ul#menu li { 
    display: block; 
    float: left; 
    height: 30px; 
    line-height: 30px;      
}

ul#menu li a { display: block; padding: 0 20px; }

.submenu {
   position: absolute;
   width: 100%;
   left: 0px;
   display: none;
   border-bottom: 1px solid #ccc;    
}

ul#menu li div.submenu ul li {
   float: none;
}

.col1, .col2, .col3 {
    width: 33%;
    background: #f4f4f4;
    float: left;
}

.col2, .col3 {
    text-align: center;
}

.border-right { border-right:1px solid #ccc; }

CSS:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">about</a>
        <div class="submenu">
            <div class="col1 border-right">
                <ul>
                    <li><a href="#">about link 1</a></li>
                    <li><a href="#">about link 2</a></li>
                    <li><a href="#">about link 3</a></li>
                    <li><a href="#">about link 4</a></li>
                </ul>                                    
            </div>
            <div class="col2 border-right">
                <img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
            </div>
            <div class="col3">
                <img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
            </div>
        </div>            
    </li>
    ...
    ...
    ...
</ul>

ul#menu { 
    width: 100%; 
    position: relative; 
    height: 30px; 
    background:#ccc;
    border-bottom: 1px solid #666;        
}

ul#menu li { 
    display: block; 
    float: left; 
    height: 30px; 
    line-height: 30px;      
}

ul#menu li a { display: block; padding: 0 20px; }

.submenu {
   position: absolute;
   width: 100%;
   left: 0px;
   display: none;
   border-bottom: 1px solid #ccc;    
}

ul#menu li div.submenu ul li {
   float: none;
}

.col1, .col2, .col3 {
    width: 33%;
    background: #f4f4f4;
    float: left;
}

.col2, .col3 {
    text-align: center;
}

.border-right { border-right:1px solid #ccc; }

---

​

Asif，我已经创建了一个小演示，希望你会喜欢它，请参阅下面的我的。