CSSの継承について...

質問

CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、
前のulタグで使った背景画像がずっと継承されて困っております。

当方の内容です↓

【CSS記述】
-----------------------
#manu-nanyo{
display: block;
position: absolute;
background-image: url(fu/area_nanyo.png);
background-repeat: no-repeat;
background-position: center top;
color: black;
width: 200px;
height: 40px;
}
.job-menu ul{
display: block;
list-style-type: none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: silver;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: silver;
text-decoration: none;
}
.job-menu li{
margin: 0;
padding: 0;
background: url(img/migi_aka.png) left no-repeat;
}
.job-menu a{
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 14px;
color: black;
font-size: 15px;
text-decoration: none;
}
.job-menu a:hover{
background-color: rgb(204, 204, 204);
color: red;
}
#newshop_bunner{
frot: left;
width: 200px;
padding-top: 10px;
text-align: left;
background-position: top left;
}
.newshop-banner ul{
margin-top: 20px;
margin-left: 0;
padding-left: 0;
}
.newshop-banner li{
text-decoration : none;
text-align : right;
font-size: 12px;
}
.newshop-banner a{
margin-top: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
color: blue;
font-size: 12px;
text-decoration: none;
text-align: right;
}
.newshop-banner a:hover{
background-color: white;
color: lime;
}
ul.sample{
width:100%;
margin-top:20px;
font-size:10px;
padding-left:0;
margin-left:0;
}
ul.sample li{
list-style-position: outside;
background-color: transparent;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: auto auto;
background-origin: padding-box;
background-clip: border-box;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
width: 120px;
float: left;
border-width: 2px;
border-color: rgb(255, 238, 219);
border-style: ridge;
}
.list-test1{
float: left;
list-style-type: none;
margin-top: 40px;
padding-top: 40px;
color: orange;
}

【HTML記述】
-----------------------
<div id="manu-nanyo">
<div class="job-menu">
<ul>
<li><a href="*">野球</a>
<li><a href="*">サッカー</a>
<li><a href="*">テニス</a>
<li><a href="*">ゴルフ</a>
<li><a href="*">バスケ</a>
</ul>
</div>
<div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗">
<ul class="newshop-banner">
<li><a href="*"><img src="#">店名○○○○○お店ネーム</a>
<li><a href="*"><img src="#">店名○○○○○お店ネーム</a>
</ul>
<ul class="sample">
<li><a href="#">テスト1</a>
<li><a href="#">テスト2</a>
<li><a href="#">テスト3</a>
<li><a href="#">テスト4</a>
<li><a href="#">テスト5</a>
</ul>
<ul class="list-test1">
<li><a href="#">トップページ</a>
<li><a href="#">テストページ1</a>
<li><a href="#">テストページ2</a>
</ul>
</div>

-----------------------

.job-menu li　で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。
クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・
(ul属性・a属性で分けても継承されてしまいます）

試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。

ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？
それとも根本的な何かを履き違えしているのでしょうか？

宜しくお願い致しますm(_ _)m

回答No.2

site_study_com

根本なのですが、こちらにあげられているソースは実際に使っているものでしょうか。
もし実際につかっているものでしたら、タグの閉じ忘れが原因かと思います。

もし違うようでしたら実際に使っているソースを上げていただけますでしょうか。
また、確認されているブラウザも教えてください。

回答No.1

oyukitya-n

上記見ましたが、
テストしてないので何とも言えないのですが、

.job-menu li{
上記のクラス指定を固定する。
↓
#manu-nanyo .job-menu ul li{
に変えてみてはいかがでしょうか？

ソースを見たのですが、
reset.cssを使ってみてはいかがですか？

補足

ご回答ありがとうございます。

クラス指定の固定、シートを別に作成、両方ともダメでした・・・

一応記述を
#manu-nanyo .job-menu ul li{

.job-menu ul li　#manu-nanyo{

.job-menu ul　#manu-nanyo{
.job-menu li　#manu-nanyo{
もやってみたのですが・・・

どうしたらいいものでしょう(汗)