代码在jsfiddle中工作但在我的html页面中不起作用

Question

我尝试在jsfiddle中编辑我的代码，直到它正常工作，最后它在jsfiddle中正常工作并且输出与我想要的相同但是当我在我的abc.html页面中尝试相同的代码并且css然后代码执行是不是这工作在jsfiddle

这里是带有代码和输出的JSFIDDLE图像

这里是我的代码和HTML

＆＃13;

＆＃13;

     .wrap {


       width: 100%;


       /* Spans the width of the page */


       height: 40px;


       margin: 0;


       /* Ensures there is no space between sides of the screen and the menu */


       z-index: 99;


       /* Makes sure that your menu remains on top of other page elements */


       position: relative;


       background-color: #366b82;


     }


     .navbar {


       height: 50px;


       padding: 15px;


       margin: 0;


       position: absolute;


       /* Ensures that the menu doesn’t affect other elements */


       border-right: 1px solid #54879d;


       margin-left: 55px;


       padding-left: 15px;


       padding-bottom: 15px;


       padding-top: 0px;


       margin-left: 25px;


     }


     .navbar li {


       height: auto;


       width: 131px;


       /* Each menu item is 150px wide */


       float: left;


       /* This lines up the menu items horizontally */


       text-align: center;


       /* All text is placed in the center of the box */


       list-style: none;


       /* Removes the default styling (bullets) for the list */


       font: normal bold 12px/1.2em Arial, Verdana, Helvetica;


       padding: 0;


       margin: 0;


       background-color: #366b82;


     }


     .navbar a {


       padding: 18px 0;


       /* Adds a padding on the top and bottom so the text appears centered vertically */


       border-left: 1px solid #54879d;


       /* Creates a border in a slightly lighter shade of blue than the background.  Combined with the right border, this creates a nice effect. */


       border-right: 1px solid #1f5065;


       /* Creates a border in a slightly darker shade of blue than the background.  Combined with the left border, this creates a nice effect. */


       text-decoration: none;


       /* Removes the default hyperlink styling. */


       color: white;


       /* Text color is white */


       display: block;


     }


     .navbar li:hover,


     a:hover {


       background-color: #54879d;


     }


     .navbar li ul {


       display: none;


       /* Hides the drop-down menu */


       height: auto;


       margin: 0;


       /* Aligns drop-down box underneath the menu item */


       padding: 0;


       /* Aligns drop-down box underneath the menu item */


     }


     .navbar li:hover ul {


       display: block;


       /* Displays the drop-down box when the menu item is hovered over */


     }


     .navbar li ul li {


       background-color: #54879d;


     }


     .navbar li ul li a {


       border-left: 1px solid #1f5065;


       border-right: 1px solid #1f5065;


       border-top: 1px solid #74a3b7;


       border-bottom: 1px solid #1f5065;


     }


     .navbar li ul li a:hover {


       background-color: #366b82;


     }


     /* i add this css code for link box*/


     .navbar li ul li ul li {


       display: block;


     }


     .b:hover .a {


       display: block;


       margin-left: 130px;


       margin-top: -50px;


     }


     .a {


       display: none;


     }

＆＃13;

<div id="menu">
  <div id="wrap">
    <ul class="navbar">
      <li><a href="index.html">HOME</a>
      </li>
      <li><a href="#">ABOUT US</a>
        <ul id="Ul1">
          <li><a id="A1" href="Company_Profile.html">Company Profile</a>
          </li>
          <li><a href="Our_Philsphoy.html">Our Philsohpy</a>
          </li>
          <li><a href="CEO_Profile.html">CEO Profile</a>
          </li>
          <li><a href="Board_of_Direct.html">Board of Directors</a>
          </li>
          <li><a href="Our_People.html">Our People</a>
          </li>
          <li><a href="Global_Partners.html">Global Partnership</a>
          </li>
          <li><a href="carer.html">Career</a>
          </li>
        </ul>
      </li>
      <li><a href="training.html">TRAINING</a>
        <ul id="Ul2">
          <li><a id="A2" href="Academics.html">Academics</a>
          </li>
          <li><a href="Coorporate.html">Corporate</a>
          </li>
          <li><a href="Personnel.html">Our Personnel</a>
          </li>
        </ul>
      </li>
      <li><a href="Publishing_serv.html">PUBLISHING </a>
      </li>
      <li><a href="http://www.gcbss.org">CONFERENCES</a>
      </li>
      <li><a href="Exhibition.html">EXHIBITION</a>
      </li>

      <li><a href="Research.html">RESEARCH</a>
        <ul id="subnavlist">

          <li><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
          </li>

          <ul class="c">
            <li class="a"> <a href="#">Link</a>
            </li>

          </ul>





          <li><a href="Data_collec_services.htm">Data Collection Services</a>
          </li>
          <li><a href="Proof_Edit.html">Editing &amp; Proof Reading</a>
          </li>
        </ul>
      </li>
      <li id="active"><a href="contact.html">CONTACT US</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

并输出

Answer 1

我设法通过右键单击jsfiddle的结果窗口并选择＆＃34; View Frame Source＆＃34;来解决类似的问题。然后只需复制并粘贴到一个新的HTML文档中。希望这会有所帮助。

Answer 2

我不确定你出了什么问题。我使用相同的代码来查看它是否有效，它对我有用。如果您不熟悉HTML和CSS，则需要为html和body添加起始和结束标记。也是一个标题链接您的CSS文件。

<html>
<head>
    <style>
        <!-- your CSS here -->
    </style>
</head>

<body>
    <!-- your HTML here -->
</body>
</html>