html嵌入html后没法完全显示，并且加载CSS失败 _HTML/CSS

html嵌入html后无法完全显示，并且加载CSS失败
原本没有做嵌入，现在为了修改导航栏方便，就把导航栏写到一个html里面，方便以后单独修改后多个页面能使用。
问题是没嵌入前网页是正常的，把导航栏写到另一个html后就不正常了，有的无法显示，甚至无法加载CSS，请问这是什么回事？ CSS是标准的在head内部加载

HTML code

<link rel="stylesheet" href="./default.css" type="text/css">

嵌入的语句是

HTML code

<iframe name="content_frame" marginwidth=0 marginheight=0 width=100%  src="./head.html" frameborder="0"  scrolling="no" ></iframe>

被嵌入的页面是

HTML code


<!--头部链接，嵌入整个NAV，包括最顶部、图片、和导航栏-->
    <div class="top">
    
        <div id="nav">
            <div class="nav-left">
                
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                咨询电话：<font color="red">020-33445566</font>
            </div>
            
            <div class="nav-right">
                <a href="">网站首页</a>&nbsp;|&nbsp;<a href="javascript:void(0);" onclick="AddFavorite('我的网站',location.href)">收藏本校</a>
            </div>
            
            <!--清除浮动-->
            <div class="clear">
            </div>
        </div>
        
        <div class = "banner">
            <center><img src="./Front-pic/banner.jpg" alt="aa" width="1079" height="120"></img></center>
        </div>
        
        <div class = "Navigation">
            <div id="menu_wrapper" class="blue">
            <div class="left"></div>
                <ul id="menu">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">招生信息</a></li>
                    <li><a href="#">通知公告</a></li>
                    <li><a href="#">网上报名</a></li>
                    <li><a href="#">在线资讯</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </div>

------解决方案--------------------
用iframe嵌入的HTML页面是一个独立的页面，所以你需要把相应的CSS样式写到head.html页面里。