0
Выпадающее меню не отображается ... Я сделал все, что требуется, но я не знаю, пока он не появляется.Выпадающее меню не отображается
Это мой 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-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*/
И это HTML-код для приведенного выше кода CSS:
<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, используемого в вашем html, например hbg, hbgimg и т. Д. Еще раз проверьте свою ссылку, может быть определенный источник файла css, который нужно добавить, чтобы он работал. –
@NitinAgrawal, я вижу эти классы внутри css ... – WhiteAngel
Мой плохой ... Кажется, я прокрутил ваш большой css и не заметил, что они были определены сверху. В любом случае у вас есть рабочий прототип, чтобы показать желаемое поведение? –