Question

http://www.dunhamssports.com/wp-content/themes/ds2/css/images/pic.png

我正在尝试在我正在构建的列表中的每个子菜单的底部添加一个红色条。由于当前子菜单ul输出暗渐变背景，因此我不能使用另一背景图像。无法确定我的代码中的哪个位置，我可能会欺骗它出现在子菜单中每个列表的底部。

<div id="nav">
        <ul id="coolMenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Weekly Circular Locater</a></li>
                   </ul>

            </li>
            <li><a href="#">Store Locator</a>
                    <ul>
                         <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Weekly Circular Locator</a></li>
                    </ul>
            </li>
            <li><a href="#">Weekly Circular</a></li>
        </ul>

    </div>

body {background-color:#999;}
    #nav {background: url(http://www.dunhamssports.com/wp-content/themes/ds2/css/images/nav.jpg) repeat-x scroll 0 0 transparent;   border-bottom: 1px solid #010103;   height: 46px;}
    ul {list-style-type:none; padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:36px; text-transform:uppercase;}
    #coolMenu {float: left;list-style: none;margin:0px; font-size: 14px;}
    #coolMenu > li {float: left;margin:10px 0px 0px 10px; border-right:1px solid #fff;padding-right:7px;}
    #coolMenu li a {display: block; line-height: 2em; padding: 0 .5em; text-decoration: none;}
    #coolMenu ul {position: absolute;display: none;z-index: 999;list-style-type:none;}
    #coolMenu ul li a {width: 100%;}
    #coolMenu li:hover ul {display: block;}
    /* Main menu
    ------------------------------------------*/
    #coolMenu > li > a {color:#fff;font-weight: normal;}
    #coolMenu > li:hover > a {color: #fff; border-bottom:9px solid #920001;}
    #coolMenu > li > .active {color: #fff;}
    /* Submenu
    ------------------------------------------*/
    #coolMenu ul {border: 1px solid #fff; background-image:url(http://www.dunhamssports.com/wp-content/themes/ds2/css/images/dropnav-bg.png); background-repeat:repeat;text-transform:none; color:#fff; list-style-type:disc; padding-left:25px;}
    #coolMenu ul li a {color: #fff; text-indent:-10px;}
    #coolMenu ul li:hover a {color: #999;}

Answer 1

你可以将div放入最后一个li，这样你就可以像这样调整它，

    <ul id="coolMenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Store Locator</a></li>
                    <li><a href="#">Weekly Circular Locater</a>
                      <div></div>
                    </li>
               </ul>
        </li>
        <li><a href="#">Store Locator</a>
                <ul>
                     <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Store Locator</a></li>
                    <li><a href="#">Weekly Circular Locator</a>
                    <div></div></li>
                </ul>
        </li>
        <li><a href="#">Weekly Circular</a></li>
    </ul>

然后加入这种风格，

#coolMenu ul li div {
    border-bottom:9px solid #920001;
    width: auto;
    margin-left: -20px;
}

如何使用背景图像在ul子菜单中添加image / div？

1 个答案: