我想在 HTML 页面上的 (code-1) 选项卡下添加以下菜单 (code-2)。但它没有显示/显示在选项卡区域下。
我的 code-2 中也包含 .css 样式，因此这可能是原因。谁能建议我如何纠正这个问题？发生这种情况是因为我的页面中有两个 div，一个用于选项卡，另一个用于菜单项？
我的 HTML 页面中的选项卡 - 代码 1
</div>
<div class="tabpage" id="tabpage_2" style="height:500px">
//Want to insert the menucode in this area but not getting any content displayed.
</div>
我的菜单代码:Code-2
<html>
<head>
<title>Example of HTML Menu</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li {
float:left; position:relative; padding-right:100; display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontalmenu li ul {
display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
display:block;
background:red;
height:auto; width:8em;
}
#horizontalmenu li ul li{
clear:both;
border-style:none;
}
</style>
</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>
</html>
有问题的代码
<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>
最佳答案
那么您是否想插入整个“Code-2”？您不需要插入<html><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>
并导入标题部分的样式。
关于javascript - 在 HTML 页面中添加菜单项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24636249/