Javascript 在HTML页面中添加菜单项_Javascript_Html_Drop Down Menu_Menuitem

Javascript 在HTML页面中添加菜单项

javascript html drop-down-menu

Javascript 在HTML页面中添加菜单项,javascript,html,drop-down-menu,menuitem,Javascript,Html,Drop Down Menu,Menuitem,我想在HTML页面上的“显示代码-1”选项卡下添加下面的菜单“代码-2”。但它没有显示/显示在选项卡区域下我的代码2中也包含了.css样式，所以这可能是原因。有人能建议我如何纠正这个问题吗？发生这种情况是因为我的页面中有两个div，一个是tab，另一个是menuitem 我的HTML页面中的选项卡-代码1 我的菜单代码：代码2 问题代码 <head> <title>Example of HTML Menu</title> <style type

我想在HTML页面上的“显示代码-1”选项卡下添加下面的菜单“代码-2”。但它没有显示/显示在选项卡区域下

我的代码2中也包含了.css样式，所以这可能是原因。有人能建议我如何纠正这个问题吗？发生这种情况是因为我的页面中有两个div，一个是tab，另一个是menuitem

我的HTML页面中的选项卡-代码1

我的菜单代码：代码2

问题代码

<head>
  <title>Example of HTML Menu</title>
  <style type="text/css" media="screen" hef = "mystyle.css">
</head>
<body>
  <div id="horizontalmenu">
    <ul>
      <li><a href="#">News</a>
        <ul>
          <li><a href="#">National</a></li>
          <li><a href="#">International</a></li>
          <li><a href="#">Sport</a></li>
          <li><a href="#">Hollybood</a></li>
        </ul>
      </li>
      <li><a href="#">Technology</a>
        <ul>
          <li><a href="#">IT/Software</a></li>
          <li><a href="#">Hardware</a></li>
          <li><a href="#">Iphone</a></li>
          <li><a href="#">Neuro-Science</a></li>
        </ul>                   
      </li>
      <li><a href="#">Sports</a>
        <ul>
          <li><a href="#">Cricket</a></li>
          <li><a href="#">Tenis</a></li>
          <li><a href="#">Badminton</a></li>
          <li><a href="#">Hockey</a></li>
        </ul>
      </li>
      <li><a href="#">Country</a>
        <ul>
          <li><a href="#">India</a></li>
          <li><a href="#">America</a></li>
          <li><a href="#">France</a></li>
          <li><a href="#">Pakistaan</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>

那么你是想插入整个代码2吗？您不需要插入标记

只需插入：

    <div id="horizontalmenu">
        <ul> <li><a href="#">News</a>
                <ul> <li><a href="#">National</a></li> <li><a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul>
            </li>
            <li>
            <a href="#">Technology</a>
        <ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a></li> <li><a href="#">Neuro-Science</a></li> </ul>

            </li>
            <li>
            <a href="#">Sports</a>
                <ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul>
            </li>
            <li>
            <a href="#">Country</a>
                <ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> <li><a href="#">Pakistaan</a></li> </ul>

            </li>
        </ul>
</div>

然后导入标题部分中的样式。

我尝试了您建议的样式，但没有效果。我已将代码粘贴在我的原始线程中标题为“问题起因”的部分下。

<head>
  <title>Example of HTML Menu</title>
  <style type="text/css" media="screen" hef = "mystyle.css">
</head>
<body>
  <div id="horizontalmenu">
    <ul>
      <li><a href="#">News</a>
        <ul>
          <li><a href="#">National</a></li>
          <li><a href="#">International</a></li>
          <li><a href="#">Sport</a></li>
          <li><a href="#">Hollybood</a></li>
        </ul>
      </li>
      <li><a href="#">Technology</a>
        <ul>
          <li><a href="#">IT/Software</a></li>
          <li><a href="#">Hardware</a></li>
          <li><a href="#">Iphone</a></li>
          <li><a href="#">Neuro-Science</a></li>
        </ul>                   
      </li>
      <li><a href="#">Sports</a>
        <ul>
          <li><a href="#">Cricket</a></li>
          <li><a href="#">Tenis</a></li>
          <li><a href="#">Badminton</a></li>
          <li><a href="#">Hockey</a></li>
        </ul>
      </li>
      <li><a href="#">Country</a>
        <ul>
          <li><a href="#">India</a></li>
          <li><a href="#">America</a></li>
          <li><a href="#">France</a></li>
          <li><a href="#">Pakistaan</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>

    <div id="horizontalmenu">
        <ul> <li><a href="#">News</a>
                <ul> <li><a href="#">National</a></li> <li><a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul>
            </li>
            <li>
            <a href="#">Technology</a>
        <ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a></li> <li><a href="#">Neuro-Science</a></li> </ul>

            </li>
            <li>
            <a href="#">Sports</a>
                <ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul>
            </li>
            <li>
            <a href="#">Country</a>
                <ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> <li><a href="#">Pakistaan</a></li> </ul>

            </li>
        </ul>
</div>