Html 下拉菜单未显示
下拉菜单未显示。。。我已经做了所有需要做的,但我不知道它还没有出现 这是我的css:Html 下拉菜单未显示,html,css,drop-down-menu,Html,Css,Drop Down Menu,下拉菜单未显示。。。我已经做了所有需要做的,但我不知道它还没有出现 这是我的css: /* hbg */ .hbg { background:url('images/hbg_bg.png') repeat-x 50% top; margin-bottom:32px; text-align: center; } .hbg_resize { padding-left:0; width:930px; height:283px; border-b
/* hbg */
.hbg {
background:url('images/hbg_bg.png') repeat-x 50% top;
margin-bottom:32px;
text-align: center;
}
.hbg_resize {
padding-left:0;
width:930px;
height:283px;
border-bottom:8px solid #272f33;
}
.hbg .hbg_r {
margin-left:30px !important;
margin-left:15px;
float:left;
width:420px;
color:#fff;
}
.hbg img.hbgimg {
padding-top:28px;
float:right;
}
.hbg h2 {
margin:0;
padding:16px 0 0 0;
font:bold 24px/1.5em Arial, Helvetica, sans-serif;
color:#fff;
text-transform:uppercase;
}
.hbg .nav_menu ul {
margin:0 12px 0 0;
padding:0 20px;
float:left;
width:auto;
list-style:none;
height:57px;
background-color:#272f33;
}
.hbg .nav_menu ul li {
padding:15px 1px;
float:left;
height:27px;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.hbg .nav_menu ul li a {
display:block;
margin:0;
padding:4px 12px 0;
color:#9fa0a0;
text-decoration:none;
}
.hbg .nav_menu ul li a:hover, .hbg .nav_menu ul li.active a {
color:#fff;
border-bottom:4px solid #1872a6;
}
/*Drop down menu start*/
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/*Drop down menu ends*/
这是上面给定css代码的HTML代码:
<div class="hbg">
<div class="hbg_resize">
<div class="nav_menu">
<ul class="menu">
<li class="active"><a href="Homenew.aspx">Home</a>
</li>
<li><a href="#">Dash board</a>
</li>
<li><a href="#">Reports</a>
<ul class="sub-menu">
<li>Sub Menu</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li><a href="#">Alerts</a>
</li>
<li><a href="#">Sites</a>
</li>
</ul>
</div>
<img src="images/hbg_img.jpg" width="446" height="241" alt="pix" class="hbgimg" />
<div class="hbg_r">
<h2 style="color: #FFFFFF"> </h2>GeEms
<p> </p>
<p><strong style="color: #FFFFFF">GeEms Emonitoring Live Powered by Teamsustain LTD<br/>
</strong>
</p>
</div>
</div>
</div>
任何帮助都将不胜感激。问题是您在菜单类的CSS选择器中混合了类和id。 此代码菜单表示您正在尝试访问定义的位置 你有两个选择: 将id添加到菜单项,如下所示:。以下是JSBin: 将CSS文件中的所有菜单实例更改为.menu
看来你是从其他网站复制粘贴的。您的html中使用的大多数css类(如hbg、hbgimg等)都没有定义。请再次检查您的引用,可能需要添加特定的css文件源才能正常工作。@NitinAgrawal,我可以在css中看到这些类……我的错……我想我滚动了您的大css,没有注意到它们是在顶部定义的。您是否有工作原型来显示所需的行为?@NitinAgrawal请向上滚动并检查您是否可以看到hbg、hbgimg等的所有css类。@Jilu类似这样的内容:?感谢您的建议@WhiteAngel。我两种方法都试过了,但还是不走运。我甚至看不出有什么不同…@Jilu,不知何故我给了你一个指向错误JSBin的链接-我在我的帖子中更新了它:。试试看。2.