0

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

1 回答 1

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;
}
于 2012-06-14T14:34:26.677 回答