이미 배경 이미지를 사용하는 ul 하위 메뉴에서 image/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

당신이 다음이이 같은 조정할 수 있도록 마지막 리튬에 사업부에 넣을 수 있습니다

,

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