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 に答える