Question

我正在使用图片精灵并使用CSS属性背景位置进行调整。我需要为名为Produkte的一个元素添加一个文本下拉菜单。我想得到一些帮助，这将是非常值得赞赏的。

HTML CODE：

<div class="sixteen columns menu-container">
            <div id="wrapper">
            <nav>
                <ul id="awesome-menu">
                    <li><a href="#" class="nav-one active">Home</a></li>
                    <li><a href="#" class="nav-two" id="product-clk">Produkte</a>                                      
                        <ul>
                            <li><a href="#">kolors</a></li>
                            <li><a href="#">Hanchustfen</a></li>
                            <li><a href="#">Kanalkannan</a></li>
                            <li><a href="#">Interaktive Online  Prasentation</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="nav-three">Zubehor</a></li>
                    <li><a href="#" class="nav-four">Angebote</a></li>
                    <li><a href="#" class="nav-five">Downloads</a></li>
                    <li><a href="#" class="nav-six">Impressum</a></li>
                </ul>
            </nav>
            </div>
        </div><!-- End: Sixteen Columns and Menu Container -->

CSS代码：

.menu-container {
    height: 90px;
    background: url(../images/menu-bg.png) repeat-x #d4d4d4;
    box-shadow: 2px #888888;
}

ul#awesome-menu {
    width: 100%;
    margin: 0 auto;
    list-style: none;
    margin-left: 66px;
}

ul#awesome-menu li { 
    display: inline; 
}

ul#awesome-menu li a {
    display: block;
    float: left;
    height: 75px;
    background: url(../images/menu.png);
    text-indent: -9999px;
    margin-top: 3px;
}

ul#awesome-menu li a.nav-one {
    width: 96px; background-position: 0 0;  
  }

ul#awesome-menu li a.nav-two {
    width: 138px; background-position: -96px 0; 
  }

ul#awesome-menu li a.nav-three {
    width: 126px; background-position: -234px 0; 
  }

ul#awesome-menu li a.nav-four {
    width: 136px; background-position: -360px 0;  
  }

ul#awesome-menu li a.nav-five {
    width: 146px; background-position: -496px 0; 
  }

ul#awesome-menu li a.nav-six {
    width: 157px; background-position: -642px 0; 
  }

ul#awesome-menu li a.nav-one:hover, ul#awesome-menu li a.nav-one:focus {
        background-position: 0 -76px;   
    }

ul#awesome-menu li a.nav-two:hover, ul#awesome-menu li a.nav-two:focus {
        background-position: -96px -76px;   
    }

ul#awesome-menu li a.nav-three:hover, ul#awesome-menu li a.nav-three:focus {
        background-position: -234px -76px;  
    }

ul#awesome-menu li a.nav-four:hover, ul#awesome-menu li a.nav-four:focus {
        background-position: -360px -76px;  
    }

ul#awesome-menu li a.nav-five:hover, ul#awesome-menu li a.nav-five:focus {
        background-position: -496px -76px;  
    }

ul#awesome-menu li a.nav-six:hover, ul#awesome-menu li a.nav-six:focus {
        background-position: -642px -76px;  
    }

ul#awesome-menu li a.nav-one.active {
        background-position: 0 -76px;   
}

直到第一级菜单工作正常。请帮帮我

Answer 1

我猜你要为你的＆＃39; Produkte＆＃39;提供一个下拉图标。链接，因为它里面有一个子菜单。因此，如果您的查询尝试使用此功能：

<强> HTML：

<li><a href="#" class="nav-two" id="product-clk"><span class="drop-ic"></span>Produkte</a>

<强> CSS

ul#awesome-menu li a.nav-two { position: relative; }

.drop-ic { position: absolute; top: 0; right: 0; background: url('../images/your-image-name') no-repeat 0 0; width: 26px; height: 24px; }

根据您的要求设置顶部和右侧值，希望它对您有所帮助。

如何在图像精灵菜单上添加文本下拉菜单？

1 个答案: