Question

这一直让我整个上午都疯了，扔掉了我认为我对CSS的所有信息。

我正在使用以下页面来帮助我设计手风琴菜单; http://www.menucool.com/vertical/accordion-menu-css?s=1

问题是，当我保存整个页面以及相关的.css和.js文件时，菜单显示不同。我在这里上传了结果显示; http://www.soflorealty.com/css/

我不知道为什么（1）箭头加倍，以及（2）为什么用已填充的盒子填充标题。

即使页面完全按原样保存，没有任何更改，可能会导致什么？我该怎么做才能纠正显示？

    /* Accordion Menu powered by www.menucool.com */

/* ##### Top level items #####*/
#acdnmenu {
    /* Note about height: 
    Set "height:auto;" if flexible height is required. 
    A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */
    height: 300px;
    width: 240px;
    font-size:0;
}

#acdnmenu ul.top {
    padding-left:0;
    background:#484037;
    border:1px solid #000;
}

#acdnmenu div.heading, #acdnmenu a.link {
    padding: 8px;
    padding-left: 24px;
    text-align: left;
    font: normal 12px Verdana;
    color: #A98;
    background: #3A332C url(bg.jpg) repeat-x 0 0;
    text-decoration: none;
    outline: none;
}

#acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link {
    color:#CBA;
    font-weight:normal;
    text-decoration:none;   
}

/*Top level link without children*/
#acdnmenu a.current, #acdnmenu a.current:hover {
    color:#CBA;
    text-decoration:underline;   
}
/* arrow image for the top headings */
#acdnmenu div.arrowImage {
    width: 12px;
    height: 12px;
    top: 9px;
    left: 8px; /* right:4px; or Changing it to "left:8px;" will position the arrow image to the left */
    background-image: url(arrows.gif);
    background-position: 0 0;
}

#acdnmenu div.current div.arrowImage {
    background-position:0 -12px;
}

#acdnmenu li.separator {
    border-top:1px solid #000;
    border-bottom:none; 
}


/* ##### Sub level items #####*/
#acdnmenu ul.sub {
    /* [disabled]padding-left:14px; */ /*This determines the hierarchical offset*/
}

#acdnmenu ul.sub div.heading {
    text-align:left;
    font:normal 12px Arial;
    padding:5px; padding-left:20px;
    color:#CCC;
    background:none; 
}
#acdnmenu ul.sub div.heading a {
    color:#CBA;
}

#acdnmenu ul.sub div.current {
    color:#F90;
    background:none; 
}

#acdnmenu ul.sub a.link {
    font:normal 11px Arial;
    color:#CBA;
    padding:5px; padding-left:20px;
    text-decoration:none;
    background:none; 
}

#acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current, 
#acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current {
    color:#F90;
    text-decoration:underline;
    background:none; 
}

#acdnmenu ul.sub div.arrowImage {
    width:12px;
    height:12px;
    top:6px;
    left:4px;
    background-image:url(arrows.gif);
    background-position:0 -24px;
}

#acdnmenu ul.sub div.current div.arrowImage {
    background-position:0 -36px;
}



/* ##### Followings usually don't need modification ###### */
/*Hack the font-size:0 bug for IE6 */
#acdnmenu,  #acdnmenu ul {
    display:block;
    font-size:0px;
    line-height:0px;
}
#acdnmenu li {font-size:12px; line-height:16px;}
#acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;} 

/*Hack for IE6-7*/
#acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;}
#acdnmenu li {*float:left;*width:100%;}

#acdnmenu ul {
    position:relative;/*!*/
    overflow:hidden;
    padding:0;margin:0;list-style-type: none;padding-left:10px;
}
#acdnmenu>ul{visibility: hidden;}
#acdnmenu li {padding:0;margin:0;}

#acdnmenu div.heading, #acdnmenu div.current
{
    position:relative;
    cursor: pointer;
}
#acdnmenu div.arrowImage {position:absolute; overflow:hidden;}

Answer 1

看起来问题是你有一个带有类的div .heading和div的内部是另一个带有类.heading的div。从结构的角度来看，这有点奇怪。由于从第19行开始的以下css，它变得有问题。

#acdnmenu div.heading {
padding: 8px;
padding-left: 24px;
text-align: left;
font: normal 12px Verdana;
color: #A98;
background: #3A332C url(../Accordion%20Menu%20CSS_files/bg.jpg) repeat-x 0 0;
text-decoration: none;
outline: none;
}

这会将箭头图像和其他样式应用于具有ID #acdnmenu的元素内的.heading类的任何元素。如果你看一下他们的例子，他们在.heading类的父元素中没有带有.heading类的元素。它看起来我是否只是稍微改造你的html结构你应该没问题。替代方案是工作量减少，但不是最佳做法。

只需用第19行替换以下行。

#acdnmenu div.heading div.heading, #acdnmenu a.link {
padding: 8px;
padding-left: 24px;
text-align: left;
font: normal 12px Verdana;
color: #A98;
background: #3A332C url(../Accordion%20Menu%20CSS_files/bg.jpg) repeat-x 0 0;
text-decoration: none;
outline: none;
}

请注意，我只是调整了选择器，使其仅针对div.heading元素中已有的div.heading元素。

HTML代码

<body>
<div id="acdnmenu" style="width: 240px; height: 390px; background-color: rgb(119, 119, 119); border: medium none;">
    <ul class="top" style="padding-left: 0px; visibility: visible;">

        <li id="v_hm">
        <div class="heading"><div class="arrowImage"></div>Horizontal Menus</div>
            <ul style="height: 0px;" class="sub">
                <li><a style="display: block;" class="link" href="http://www.menucool.com/drop-down-menu">Drop Down Menu</a></li>
                <li><a style="display: block;" class="link" href="http://www.menucool.com/horizontal/tab-menu">Tab Menu</a></li>
            </ul></li>


        <li id="v_vm">
        <div class="heading current"><div class="arrowImage"></div>Vertical Menus</div>
            <ul style="height: 75px;" c="1" class="sub">
                <li><a style="display: block;" class="link" href="http://www.menucool.com/vertical/accordion-menu">Accordion Menu</a></li>
                <li><a style="display: block;" class="link" href="http://www.menucool.com/vertical/vertical-menu">Vertical Menu</a></li>
            </ul></li>



    </ul>
    </div>
</body>

重复的CSS不会显示相同的内容

1 个答案: