使用jquery和css下拉菜单

Question

我需要在页面加载后为我现有的服务器端菜单项创建下面提到的下拉菜单。我希望可以在页面加载后动态使用jquery和css来完成。我可以得到任何支持（没有Twitter Bootstrap，因此它没有使用我的项目）？

我需要这种功能。

对于现有的此服务器端菜单。

现有菜单的HTML

<div>
    <a onclick="eraseCookie('selectedTab')" href="http://localhost:6341/provider" title="Pet Care Professional">Pet Care Professional</a>
    <a onclick="eraseCookie('selectedTab')" href="http://localhost:6341/owner/company" title="Company">Company</a>
    <a onclick="eraseCookie('selectedTab')" href="http://localhost:6341/provider/tour" title="Product Tour">Product Tour</a>
    <a onclick="eraseCookie('selectedTab')" href="http://localhost:6341/owner/getinfo" title="Contact Us">Contact Us</a>
    <a onclick="eraseCookie('selectedTab')" href="http://localhost:6341/" title="For Pet Owners">For Pet Owners</a>
    <a onclick="eraseCookie('selectedTab')" href="http://localhost:6341/owner/BlogFeeds" class="selected" title="Blog Feeds">Blog Feeds</a>
</div>

Answer 1

这是一个完整的demo和带有code

的演示

---

HTML标记

<dl class="dropdown"> 
    <dt><a href="#"><span>Blog Feeds</span></a></dt> 
    <dd>
        <ul>
            <li><a href="#">Feed 1</a>

            </li>
            <li><a href="#">Feed 2</a>

            </li>
            <li><a href="#">Feed 3</a>

            </li>
        </ul>
    </dd>
</dl>

CSS代码

 /* Optional */    
 body {
     font-family:Arial, Helvetica, Sans-Serif;
     font-size:0.75em;
     color:#000;
 }
 .dropdown dd, .dropdown dt {
     margin:0;
     padding:0;
    position:relative;
 }
 .dropdown ul {
     margin: -1px 0 0 0;
 }
 .dropdown dd {
     position:relative;
    width: 170px;
 }
 .dropdown a, .dropdown a:visited {
     text-decoration:none;
     outline:0;
 }
 .dropdown dt a {
     display:inline-block;
     color: #fff;
     min-width:172px;
     /* Gradient */
     background: #b7cb8f;
     background: url(data:image/svg+xml;
     base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3Y2I4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3N2EyMzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
     background: -moz-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b7cb8f), color-stop(100%, #77a230));
     background: -webkit-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
     background: -o-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
     background: -ms-linear-gradient(top, #b7cb8f 0%, #77a230 100%);
     background: linear-gradient(to bottom, #b7cb8f 0%, #77a230 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7cb8f', endColorstr='#77a230', GradientType=0);
 }
 .dropdown dt a span {
     cursor:pointer;
     display:block;
     padding:7px;
    color:#fff;
 }
 .dropdown dd ul {
     background:#fff; 
     border:1px solid #ccc;
     color:#666;
     display:none;
     left:0;
     padding:0;
     position:absolute;
     top:2px;
     width:auto;
     min-width:170px;
     list-style:none;
 }
 .dropdown span.value {
     display:none;
 }
 .dropdown dd ul li a {
     padding:5px;
     display:block;
    color: #666;
 }
 .dropdown dd ul li a:hover {
     background-color:#666;
    color: #fff;
 }

jQuery脚本

$(".dropdown dt a").click(function () {
     $(".dropdown dd ul").slideToggle();
 });
 $(".dropdown dd ul li a").click(function () {
     var text = $(this).html();
     $(".dropdown dt a span").html(text);
     $(".dropdown dd ul").hide();
 });

 function getSelectedValue(id) {
     return $("#" + id).find("dt a span.value").html();
 }
/* hide the dropdown menu by clicking any where - Optional */
 $(document).bind('click', function (e) {
     var $clicked = $(e.target);
     if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").slideUp();
 });

希望能有所帮助。干杯，祝你好运！