html - 如何创建一个与另一个相似的 UL 菜单

Question

我有一个 UL，它创建了一个一直显示的菜单:

原始菜单的 HTML 是:

<div id="leftNav">
    <span id="logoWM" style="border-bottom: 1px solid #FF7263;"><a href="Default.aspx"><img src="theImages/wmlogo.png" width="219" height="47" alt="Homepage" title=" Homepage" id="imgLogoWM" /></a></span>
    <div id="leftNavLinks">
        <ul class="mainLevelNav">
            <li><a style="width: 100%;" href="why_choose_us.aspx">Why Choose Us</a></li>
            <li><a href="physicians.aspx">Physicians</a></li>
            <li><a href="medical_specialties.aspx">Medical Specialties</a></li>
            <li><a href="locations.aspx">Locations</a></li>
            <li><a href="urgent_care.aspx">Urgent Care</a></li>
            <li><a href="radiology.aspx">Radiology</a></li>
            <li style="border-bottom: none;"><a href="lab.aspx">Lab</a></li>
        </ul>
    </div>
</div>

CSS 是:

#leftNavLinks {
    position:absolute;
    width: 100%;
    left: 0%;
    top: 106px; /* NEW 3/13 */
    font-family: 'nexa_boldregular';
    font-size: 19px;
}
#leftNavLinks ul { 
    margin: 0px;
    padding: 0px; /* NEW 3/13 */
}
#leftNavLinks li {
    list-style: none;
    padding: 8px;
}
ul.mainLevelNav li {
    border-bottom: #13476F solid;
    border-width: 1px;
}
#leftNavLinks a {
    color: #fff;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 25px;
    text-indent: 0px;
    text-decoration: none;
    width: 100%;
}
#leftNavLinks a:hover {
    text-decoration: none;
}
#leftNavLinks li:hover {
    background: #5196AB;
    position: relative;
}
#leftNav {
    width: 240px;
    height: 412px;
    position: fixed;
    left: 10px;
    top: 42px;
    z-index: 2;
    background: url('../theImages/bg_80_b.png');
    text-align: left;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

对于无法显示菜单的屏幕，我添加了一个选项，让用户可以将鼠标悬停在上面以向下滑动并展开原始菜单，因此它并不总是可见的，从而阻止了其他内容。

这是下拉菜单的 UL:

修改后的菜单的 HTML 是:

<div id="leftNav" style="position: absolute; left: 22px; top: 45px;">             
    <div class="menu-item">
        <h4><a href="#">MENU</a></h4>
        <ul>
            <li style="display: absolute; top: 0; left: 0; background-color: #FFFF00; text-align: center; height: 75px; line-height: 75px;"><a href="Default.aspx"><img src="theImages/wmlogo.png" width="219" height="47" alt="Westmed Medical Group Homepage" title="Westmed Medical Group Homepage" id="imgLogoWM" /></a></li>
            <li id="u"><a href="#">Why Choose Us</a></li>
            <li id="u"><a href="#">Physicians</a></li>
            <li id="u"><a href="#">Medical Specialties</a></li>
            <li id="u"><a href="#">Locations</a></li>
            <li id="u"><a href="#">Urgent Care</a></li>
            <li id="u"><a href="#">Radiology</a></li>
            <li id="u" style="border-bottom: none;"><a href="#">Lab</a></li>
        </ul>
    </div>
</div>

CSS 是:

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: #669999 url('theImages/bgnav.png') repeat;
}

#leftNav {
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 1.5;
    margin: 50px auto;
    width: 240px;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.menu-item {
    background: url('../theImages/bg_80_b.png');
    width: 240px;
    font-family: 'nexa_boldregular';
    font-size: 19px;
}

/*Menu Header Styles*/
.menu-item h4 {
    border-bottom: 1px solid rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 7px 12px;

    /*Gradient*/
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
    background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.menu-item h4:hover {  
    background: #cc002c; /* Old browsers */
    background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
    background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.menu-item h4 a {
    color: white;
    display: block;
    text-decoration: none;
    width: 240px;
}

/*ul Styles*/
.menu-item ul {
    background: url('theImages/bg_80_b.png');
    font-size: 13px;
    line-height: 30px;
    height: 0px;
    list-style-type: none;
    overflow: hidden;
    padding: 0px;

    *Animation*/
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease;
}

.menu-item:hover ul {
    width: 240px;
    height: 380px;
}

.menu-item ul a {
    color: #fff;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 25px;
    text-indent: 0px;
    text-decoration: none;
    width: 100%;
    font-family: 'nexa_boldregular';
    font-size: 19px;
}

/*li Styles*/
.menu-item li#u {
    border-bottom: 1px #13476F solid;
    padding: 8px;
}

.menu-item li:hover {
    background: #5196AB;
}

白底蓝框为logo宽高

我如何修改上面的代码，使其与原始菜单完全匹配，除了在悬停“MENU”时显示。

Answer 1

使用 jQuery clone() 方法复制菜单，然后根据需要更改 css。