1

我有一个导航菜单，在我的网站上显示一个无序的 <ul> 列表。我试图向它添加一些额外的参数，以便我可以通过 js 控制它的输出，因为我希望有时显示一些东西而不是其他时间隐藏它们。

问题是，只要我没有在 <li> 标签上应用任何 id 属性，输出就会非常好，一旦我这样做，它就会使布局拉伸并似乎自动为其添加填充。

<div id="navigation">
<ul id="jsddm" class="dbtree">
    <li class="is-current" id="SHOP">
        <a href="...">SHOP</a>
        <ul>
            <li id="JEWELLERY">
                <a href="...">JEWELLERY</a>
                <ul>
                    <li id="NECKLACES"><a href="...">NECKLACES</a></li>
                </ul>
                <ul>
                    <li id="RINGS"><a href="...">RINGS</a></li>
                </ul>
                <ul>
                    <li id="EARRINGS"><a href="...">EARRINGS</a></li>
                </ul>
                <ul>
                    <li id="FRIENDSHIP BRACELETS"><a href="...">FRIENDSHIP BRACELETS</a></li>
                </ul>
                <ul>
                    <li id="CHARM BRACELETS"><a href="...">CHARM BRACELETS</a></li>
                </ul>
            </li>
        </ul>
        <ul>
            <li id="BESPOKE"><a href="...">BESPOKE</a>
                <ul>
                    <li id="MAKE YOUR BESPOKE "><a href="...">MAKE YOUR BESPOKE</a></li>
                </ul>
                <ul>
                    <li id="CHAINS"><a href="...">CHAINS</a></li>
                </ul>
                <ul>
                    <li id="LETTERS"><a href="...">LETTERS</a></li>
                </ul>
                <ul>
                    <li id="CRYSTALS"><a href="...">CRYSTALS</a></li>
                </ul>
                <ul>
                    <li id="GEMSTONES"><a href="...">GEMSTONES</a></li>
                </ul>
                <ul>
                    <li id="CHARMS"><a href="...">CHARMS</a></li>
                </ul>
                <ul>
                    <li id="COLOURED CORD"><a href="...">COLOURED CORD</a></li>
                </ul>
            </li>
        </ul>
        <ul>
            <li id="KA FINES (coming soon)"><a href="...">KA FINES (coming soon)</a></li>
        </ul>
        <ul>
            <li id="GIFT VOUCHER"><a href="...">GIFT VOUCHER</a></li>
        </ul>
        <ul>
            <li id="MY DETAILS"><a href="...">MY DETAILS</a></li>
        </ul>
        <ul>
            <li id="MY HISTORY"><a href="...">MY HISTORY</a></li>
        </ul>
        <ul>
            <li id="LOGOUT"><a href="...">LOGOUT</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li id="BESPOKE">
        <a href="...">BESPOKE</a>
        <ul>
            <li id="ABOUT"><a href="...">ABOUT</a></li>
        </ul>
        <ul>
            <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li>
        </ul>
        <ul>
            <li id="MAKE YOUR BESPOKE"><a href="...">MAKE YOUR BESPOKE</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li id="LOOKBOOK "><a href="...">LOOKBOOK</a>
        <ul>
            <li id="BESPOKE LOOKBOOK"><a href="...">BESPOKE LOOKBOOK</a></li>
        </ul>
        <ul>
            <li id="SOMETHING LIKE PARADISE"><a href="...">SOMETHING LIKE PARADISE</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li id="OUR STORY"><a href="...">OUR STORY</a></li>
</ul>
<ul>
    <li id="PRESS"><a href="...">PRESS</a></li>
</ul>
<ul>
    <li id="BLOG"><a href="...">BLOG</a></li>
</ul>
</div>

一旦我添加id="SHOP"到第一个 <li> ( <div id="navigation"><ul id="jsddm" class="dbtree"><li class="is-current" id="SHOP">)，它就会通过添加额外的填充来破坏它，就像它忽略了样式表中的原始规则一样。

CSS：-

<style>
   #navigation
   {
    width:160px;
    float:left;
    font-weight:normal;
    font-family:'BulmerMTStd-Regular';
    line-height:18px;
    padding-bottom:10px;
    font-size:12px; 
    }
    #navigation ul{margin-left:0px; padding-left:0px;}
    #navigation li{text-align:left; margin:0px; padding:0px;}
    #navigation ul li{color:#000000; list-style:none; margin-left:0px; padding-left:0px; margin-top:0px;}
    #navigation li ul{margin-left:0px; padding-left:0px; display:none;}
    #navigation li a{color:#000000;font-family:'BulmerMTStd-Regular'; text-decoration:none; line-     height:18px; padding-bottom:10px;}
    #navigation li a:hover{color:#8a8888;}
    #navigation li ul li ul{padding-left:10px; color:#8a8888;}
    #navigation li ul li ul a{color:#8a8888;}
    #navigation li ul li ul a:hover{color:#000000;}
    #navigation{z-index:0}
    </style>

我确定这可能是一个非常简单的问题......但我似乎无法解决它..任何帮助都非常感谢。

4

2 回答 2

0

在 html 代码的第二部分中，您添加了 id="SHOP"。然后 li 标签首先选择 id="SHOP"。当且仅当 id="SHOP" 中存在不同的属性时，li 标签才会使用 id="jsddm" 中的任何属性。如果这两个属性相同ids 然后将应用来自 id="SHOP" 的那个。

通常，尽量不要在行内元素中混合大量的类和 id。

于 2013-03-21T22:42:31.750 回答
0

正如@Dchris 所说，两者之间的唯一变化是添加id="SHOP"，正如@smclark 所说，如果您在某处为#SHOP 定义了一些样式，它只会影响事情。

当我们这样做时，您的列表不必要地嵌套得很深。您可以通过更改使 HTML 更清晰、更易读（在您的示例中更短）

<li>
    asfasf
    <ul>
        lkhlkhlkh
    </ul>
</li>

到

<li>asfasf</li>
<ul>
    lkhlkhlkh
</ul>

结果是

    <div id="navigation">   
    <ul id="jsddm" class="dbtree">
        <li class="is-current" id="SHOP"><a href="...">SHOP</a></li>
        <ul>
            <li id="JEWELLERY"><a href="...">JEWELLERY</a></li>
            <ul>
                <li id="NECKLACES"><a href="...">NECKLACES</a></li>
                <li id="RINGS"><a href="...">RINGS</a></li>
                <li id="EARRINGS"><a href="...">EARRINGS</a></li>
                <li id="FRIENDSHIP BRACELETS"><a href="...">FRIENDSHIP BRACELETS</a></li>
                <li id="CHARM BRACELETS"><a href="...">CHARM BRACELETS</a></li>
            </ul>
            <li id="BESPOKE"><a href="...">BESPOKE</a></li>
            <ul>
                <li id="MAKE YOUR BESPOKE "><a href="...">MAKE YOUR BESPOKE</a></li>
                <li id="CHAINS"><a href="...">CHAINS</a></li>
                <li id="LETTERS"><a href="...">LETTERS</a></li>
                <li id="CRYSTALS"><a href="...">CRYSTALS</a></li>
                <li id="GEMSTONES"><a href="...">GEMSTONES</a></li>
                <li id="CHARMS"><a href="...">CHARMS</a></li>
                <li id="COLOURED CORD"><a href="...">COLOURED CORD</a></li>
            </ul>
            <li id="KA FINES (coming soon)"><a href="...">KA FINES (coming soon)</a></li>
            <li id="GIFT VOUCHER"><a href="...">GIFT VOUCHER</a></li>
            <li id="MY DETAILS"><a href="...">MY DETAILS</a></li>
            <li id="MY HISTORY"><a href="...">MY HISTORY</a></li>
            <li id="LOGOUT"><a href="...">LOGOUT</a></li>
        </ul>
        <li id="BESPOKE"><a href="...">BESPOKE</a></li>
        <ul>
            <li id="ABOUT"><a href="...">ABOUT</a></li>
            <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li>
            <li id="MAKE YOUR BESPOKE"><a href="...">MAKE YOUR BESPOKE</a></li>
        </ul>
        <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li>
        <ul>
            <li id="BESPOKE LOOKBOOK"><a href="...">BESPOKE LOOKBOOK</a></li>
            <li id="SOMETHING LIKE PARADISE"><a href="...">SOMETHING LIKE PARADISE</a></li>
        </ul>
        <li id="OUR STORY"><a href="...">OUR STORY</a></li>
        <li id="PRESS"><a href="...">PRESS</a></li>
        <li id="BLOG"><a href="...">BLOG</a></li>
    </ul>
</div>

当然，您需要调整 CSS，但这也会清理干净 - 不再需要ul li li ul ul-type 定义。同样，当我们使用它时，可以清理和修剪 CSS。一些提示：#navigation li样式将针对#navigation 中的所有<li>，例如，它们应用于#navigation ul li. 像这样的东西应该给你相同的结果（可能有一个错字和/或意外删除的定义或两个）。缩进只是为了帮助您可视化级联（CSS 通常不会像这样呈现，但它并没有什么区别）。请注意，这是针对 <li> 结构中的深度嵌套的 <ul> 的。

<style type="text/css">
#navigation {
    width:160px;
    float:left;
    font-weight:normal;
    font-family:'BulmerMTStd-Regular';
    line-height:18px;
    padding-bottom:10px;
    font-size:12px;
    z-index: 0;}

    #navigation ul{margin-left:0px; padding-left:0px;}

        #navigation ul li{color:#000000; list-style:none;}

    #navigation li{text-align:left; margin:0px; padding:0px;}

        #navigation li ul{display:none;}
        #navigation li a{color:#000000; text-decoration:none;}
        #navigation li a:hover{color:#8a8888;}

            #navigation li ul li ul{padding-left:10px; color:#8a8888;}

                #navigation li ul li ul a{color:#8a8888;}
                #navigation li ul li ul a:hover{color:#000000;}
</style>
于 2013-03-22T00:58:14.997 回答