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

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

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

    <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;
}