2つのdivをオーバーラップさせずに別のdivの上に1 divのボックスシャドウを取得するにはどうすればいいですか？

Question

私は希望の結果を得るためにかなりの手間を掛けています。私は上にnavbar divとそれの下に本文のためのdivとのウェブページを持っています。それぞれにはbox-shadowがあり、navbarにはその下にのみ表示され、本文にはdivが横に表示されています。本文テキストdivは、ナビバーdivが終了する場所から正確に開始し、ナビバーdivのbox-shadowの下に表示されます。

JSFiddleは問題を適切に複製していないようですので、以下の図やコードを含めます（コードのフォーマットは駄目かもしれません）。

---

HTML

<div class="navbar"> 
    <ul> 
     <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li> 
     <li><a href="Education.html">Education</a></li> 
     <li><a href="Experience.html">Experience</a></li> 
     <li><a href="Mywork.html">My Work</a></li> 
     <li><a href="Contact.html">Contact Me</a></li> 
    </ul> 
</div> 
<div class="body"> 
    <div class="bodytext"> 
     <h1>test text</h1> 
     <p>test text</p> 
     <p>test text</p> 
     <br> 
     <br> 
     <br> 
     <h1>test text</h1> 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
} 

.navbar { 
    width: 100%; 
    text-align: center; 
    z-index: 1; 
    box-shadow: 0px 0px 10px 10px black; 
    /*position: absolute;*/ 
    padding: 0; 
    margin: 0; 
} 

.navbar ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    background-color: #E7E7EF; 
    padding: 10px; 
    width: 100%; 
} 

.navbar ul li { 
    display: inline; 
    text-align: center; 
    padding: 10px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

.navbar ul li a { 
    padding: 10px; 
    background: #E7E7EF; 
    text-decoration: none; 
    color: #CE0000; 
    font-size: 2em; 
    display: inline; 
    cursor: pointer; 
} 

.navbar ul li a:hover { 
    background-color: #C6CFD6; 
} 

.body { 
    background-color: #C6CFD6; 
    width: 70%; 
    z-index: -1; 
    text-align: center; 
    display: block; 
    margin: auto; 
    box-shadow: 0px 0px 10px 10px black; 
    margin-top: 0; 
    padding-top: 0; 
} 

写真

Imgur

---

この投稿は、おそらく最も明瞭な言葉や書式ではありません - 私はJSFiddleを作ってみましたが、私のウェブページで何が起きているかは反映されませんでした。私は不明なものを明確にしようとします。私の望む結果を得るために何ができるかについてのアイデアはありますか？

Answer 1

これがあなたに役立つかどうか教えてください。

HTML：

<div class="navbar"> 
    <ul> 
     <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li> 
     <li><a href="Education.html">Education</a></li> 
     <li><a href="Experience.html">Experience</a></li> 
     <li><a href="Mywork.html">My Work</a></li> 
     <li><a href="Contact.html">Contact Me</a></li> 
    </ul> 
</div> 
<div class="body"> 
    <div class="bodytext"> 
     <h1>test text</h1> 
     <p>test text</p> 
     <p>test text</p> 
     <br> 
     <br> 
     <br> 
     <h1>test text</h1> 
    </div> 
</div> 

CSS：

html, body { 
    height: 100%; 
} 

h1 { 
    margin: 0; 
} 

.body { 
    position: relative; 
    z-index: -1; 
    background: green; 
    box-shadow: 0px 0px 10px 0px black; 
} 

.navbar { 
    width: 100%; 
    text-align: center; 
    box-shadow: 0px 0px 10px 0px black; 
    padding: 0; 
    margin: 0; 
} 

.navbar ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    background-color: #E7E7EF; 
    padding: 10px; 
    width: 100%; 
} 

.navbar ul li { 
    display: inline; 
    text-align: center; 
    padding: 10px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

.navbar ul li a { 
    padding: 10px; 
    background: #E7E7EF; 
    text-decoration: none; 
    color: #CE0000; 
} 

My Fiddle