代码之家 › 专栏 › 技术社区 › Denise

为什么在CSS中使用“repeat”后导航栏翻了一倍?

repeat navbar css

Denise · 技术社区 · 8 年前

我想在我的网站上创建一个导航栏,背景使用橙色图像块的重复。这是 image . 但是,最终结果显示导航栏加倍,如图所示 here . 即使更改了css中的“repeat”属性,它仍然会加倍。如何使其仅为1层而不是加倍?

这是我的css代码:

#cssmenu{
      border-style: initial;
    border-color: initial;
    border-width: 0px;
    margin: 0px;
     padding:0px;
        border-image-source:initial;
        border-image-slice:initial;
        border-image-width:initial;
        border-image-outset:initial;
        border-image-repeat:initial;

        list-style-type:none;
        list-style-position:initial;
        list-style-image: initial;


        line-height:1;
        display:block;
        position:relative;
        box-sizing: border-box;


        background-image: url('../../SiteAssets/o.png');
        background-repeat:repeat;
        background-repeat-x:repeat;
        background-repeat-y:repeat;
        z-index:2;


    }

    #cssmenu:after{

    content:".";
    z-index:2;
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;

}

和我的html代码:

<div id="cssmenu" style="left:0px; top:0px" >
        <ul>
           <li>
              <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
               <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>

        </ul>

        </div>