Jquery 为什么下拉菜单向左对齐？

我正在为a开发一个下拉式导航，并且在下拉部分与父类别对齐时遇到了一些问题-它一直向左移动

以下是html：

    <ul class="dropdown">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About Us</a>
    <ul class="sub-menu">
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Process</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Financing</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Subcontractors</a></li>
    </ul>
</li>
<li><a href="#"  id="personal">Personal Banking</a></li>
<li><a href="#"  id="commercial">Commercial Banking</a></li>
<li><a href="#"  id="service">Customer Service</a>
    <ul class="sub-menu">
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Process</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Financing</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Subcontractors</a></li>
    </ul>
</li>
<li><a href="#"  id="investors">Investor Relations</a></li>
<li><a href="#"  id="contact">Contact Us</a></li>
</ul>

我尝试将ul.dropdown ul更改为相对位置，但这破坏了导航。如果能帮我纠正这个问题，我将不胜感激

谢谢。

1）使用display:block而不是visibility:hidden -将jquery更改为使用.show（）/.hide（）而不是编辑可见性属性

2） 使您的ul.dropdown ul css看起来像：

ul.dropdown ul { 
    display: none; 
    padding-left: 0;
    margin-left: 0; 
    width: 200px; 
    position: absolute;
}

---

如果您使用jQuery，您应该查看，因为这将满足您的需要。我在其他方面使用了一个修改过的版本，但如果我提取一个小摘录并将其应用到您的HTML中，我会得到以下结果

<script type="text/javascript">
    $(function() {

        $("ul.dropdown li").hover(function() {

            $(this).addClass("hover");
            $('ul:first', this).show();
            $(this).parents('li a').addClass('hover');

        }, function() {

            $(this).removeClass("hover");
            $('ul:first', this).hide();
            $(this).parents('li a').removeClass('hover');
        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

    });
</script>

<style type="text/css">
    /* CSS RESET ****************** v1.0 | 20080212 *****************************/
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    /* remember to define focus styles! */
    :focus { outline: 0; }
    /* remember to highlight inserts somehow! */
    ins { text-decoration: none; }
    del { text-decoration: line-through; }
    /* tables still need 'cellspacing="0"' in the markup */
    table { border-collapse: collapse; border-spacing: 0; }
    .dropdown, .dropdown * { margin: 0; padding: 0; list-style: none; }
    .dropdown { line-height: 1.0; }
    .dropdown ul { position: absolute; width: 10em; /* left offset of submenus need to match (see below) */ }
    .dropdown ul li { width: 100%; }
    .dropdown li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
    .dropdown li { float: left; position: relative; left: -1px; top: -1px; margin-left: 2px; margin-right: 2px; }
    .dropdown a { display: block; position: relative; }
    .dropdown span.dropdown-nolink { display: block; position: relative; }
    .dropdown li:hover ul, .dropdown li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 9999; }
    ul.dropdown li:hover li ul, ul.dropdown li.sfHover li ul { top: -999em; }
    ul.dropdown li li:hover ul, ul.dropdown li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
    ul.dropdown li li:hover li ul, ul.dropdown li li.sfHover li ul { top: -999em; }
    ul.dropdown li li li:hover ul, ul.dropdown li li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
    .dropdown { float: left; margin-bottom: 0em; }
    .dropdown a { padding: .70em 1em; text-decoration: none; }
    .dropdown a, .dropdown a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
    .dropdown span.dropdown-nolink { padding: .70em 1em; text-decoration: none; }
    .dropdown span.dropdown-nolink, .dropdown span.dropdown-nolink:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
    .dropdown li { background: #4e8997; text-align: left; }
    .dropdown li li { background: #4e8997; ;margin:0;top:-1px;left:-1px;}
    .dropdown li li li { background: rgb(188,0,47); margin: 0; top: -1px; left: 0; }
    .dropdown li:hover, .dropdown li.sfHover, .dropdown a:focus, .dropdown a:hover, .dropdown a:active { background: #c29c5d; outline: 0; z-index: 9999; }
    .sub-menu { display: none; }
</style>

$（函数（）{
$（“ul.dropdownli”）.hover（函数（）{
$（此）.addClass（“悬停”）；
$（'ul:first'，this.show（）；
$（this）.parents（'li a'）.addClass（'hover'）；
}，函数（）{
$（this.removeClass（“hover”）；
$（'ul:first'，this.hide（）；
$（this）.parents（'li a'）.removeClass（'hover'）；
});
$（“ul.dropdownlli:has（ul）”）.find（“a:first”）.append（“»；”）；
});
/*CSS重置******************v1.0|20080212*****************************/
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，big，cite，code，del，dfn，em，font，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，i，center，dl，dt，dd，dd，ol，ul，li，fieldset，form，label，label，图例，table，table，table，caption，tbody，tfoot，thead，tr，th，th，td{边距：0；填充：0；边框：0；轮廓：0；字体大小：100%；垂直对齐：基线；背景：透明；}
正文{行高：1；}
ol，ul{列表样式：无；}
blockquote，q{quotes:none；}
blockquote:before，blockquote:after，q:before，q:after{content:''；content:none；}
/*记住定义焦点样式*/
：焦点{大纲：0；}
/*记住以某种方式突出显示插入内容*/
ins{文本装饰：无；}
del{text装饰：线穿过；}
/*表仍然需要在标记中使用“cellspacing=”0“*/
表{边框折叠：折叠；边框间距：0；}
.dropdown.dropdown*{边距：0；填充：0；列表样式：无；}
.下拉列表{行高：1.0；}
.dropdown ul{位置：绝对；宽度：10em；/*子菜单的左偏移需要匹配（见下文）*/}
.下拉列表ul li{宽度：100%；}
.dropdown li:hover{visibility:inherit；/*修复了IE7的“粘性bug”*/}
.dropdown li{float:left；position:relative；left:-1px；top:-1px；margin left:2px；margin right:2px；}
.下拉{显示：块；位置：相对；}
.dropdown span.dropdown-nolink{显示：块；位置：相对；}
.dropdown li:hover ul，.dropdown li.sfHover ul{left:0；top:2.5em；/*匹配顶级ul列表项高度*/z-index:9999；}
ul.dropdownli:hover li ul，ul.dropdownli.sfHover li ul{top:-999em；}
ul.dropdown li li li:hover ul，ul.dropdown li li.sfHover ul{left:0em；/*匹配ul-width*/top:0；}
ul.dropdownli li li:hover li ul，ul.dropdownli li.sfHover li ul{top:-999em；}
ul.dropdown li li:悬停ul，ul.dropdown li.sfHover ul{左：0em；/*匹配ul宽度*/顶：0；}
.dropdown{float:左；边距底部：0em；}
.dropdown a{填充：.70em 1em；文本装饰：无；}
.dropdown a.dropdown a:visited{/*visited伪选择器，因此IE6应用文本颜色*/color:#FFF；}
.dropdown span.dropdown-nolink{padding:.70em 1em；文本装饰：无；}
.dropdown span.dropdown-nolink，.dropdown span.dropdown-nolink:visited{/*visited伪选择器，因此IE6应用文本颜色*/颜色：35;FFF；}
.下拉列表li{背景：#4e8997；文本对齐：左；}
.下拉列表li{背景：#4e8997；；边距：0；顶部：-1px；左侧：-1px；}
.下拉列表li{背景：rgb（188,0,47）；边距：0；顶部：-1px；左侧：0；}
.dropdown li:hover、.dropdown li.sfHover、.dropdown a:focus、.dropdown a:hover、.dropdown a:active{background:#c29c5d；outline:0；z-index:9999；}
.子菜单{显示：无；}

---

我发布了JS，因为我还将其更改为使用jQuery的show（）/hide（）。

感谢您为此付出的额外努力！

<script type="text/javascript">
    $(function() {

        $("ul.dropdown li").hover(function() {

            $(this).addClass("hover");
            $('ul:first', this).show();
            $(this).parents('li a').addClass('hover');

        }, function() {

            $(this).removeClass("hover");
            $('ul:first', this).hide();
            $(this).parents('li a').removeClass('hover');
        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

    });
</script>

<style type="text/css">
    /* CSS RESET ****************** v1.0 | 20080212 *****************************/
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    /* remember to define focus styles! */
    :focus { outline: 0; }
    /* remember to highlight inserts somehow! */
    ins { text-decoration: none; }
    del { text-decoration: line-through; }
    /* tables still need 'cellspacing="0"' in the markup */
    table { border-collapse: collapse; border-spacing: 0; }
    .dropdown, .dropdown * { margin: 0; padding: 0; list-style: none; }
    .dropdown { line-height: 1.0; }
    .dropdown ul { position: absolute; width: 10em; /* left offset of submenus need to match (see below) */ }
    .dropdown ul li { width: 100%; }
    .dropdown li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
    .dropdown li { float: left; position: relative; left: -1px; top: -1px; margin-left: 2px; margin-right: 2px; }
    .dropdown a { display: block; position: relative; }
    .dropdown span.dropdown-nolink { display: block; position: relative; }
    .dropdown li:hover ul, .dropdown li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 9999; }
    ul.dropdown li:hover li ul, ul.dropdown li.sfHover li ul { top: -999em; }
    ul.dropdown li li:hover ul, ul.dropdown li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
    ul.dropdown li li:hover li ul, ul.dropdown li li.sfHover li ul { top: -999em; }
    ul.dropdown li li li:hover ul, ul.dropdown li li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
    .dropdown { float: left; margin-bottom: 0em; }
    .dropdown a { padding: .70em 1em; text-decoration: none; }
    .dropdown a, .dropdown a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
    .dropdown span.dropdown-nolink { padding: .70em 1em; text-decoration: none; }
    .dropdown span.dropdown-nolink, .dropdown span.dropdown-nolink:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
    .dropdown li { background: #4e8997; text-align: left; }
    .dropdown li li { background: #4e8997; ;margin:0;top:-1px;left:-1px;}
    .dropdown li li li { background: rgb(188,0,47); margin: 0; top: -1px; left: 0; }
    .dropdown li:hover, .dropdown li.sfHover, .dropdown a:focus, .dropdown a:hover, .dropdown a:active { background: #c29c5d; outline: 0; z-index: 9999; }
    .sub-menu { display: none; }
</style>