0
在这里，我尝试修复子..当我菜单上拖动光标，然后将图像滑块这是下面的菜单下降..imageslider下降在HTML CSS
这里是IMAGE 1
，当我菜单上悬停鼠标，那么像这样
图像2 
代码
/* CSS Document */
body{
padding:0px;
margin:0px;
}
img{
border:0px;
}
.flt{
float:left;
}
#wh_bg{
width:1000px;
margin:auto;
}
#bg_bg{
width:1000px;
float:left;
margin-left: -40px;
margin-top: -50px;
}
/*top panel starts here*/
#top{
width:1000px;
float:left;
}
.top1{
width:500px;
float:left;
height:176px;
display:inline;
background:url(../images/top1.jpg) no-repeat;
}
.logo{
float:left;
margin:89px 0px 0px -15px;
position:relative;
top: 0px;
left: 0px;
}
#menu{
width:1000px;
float:left;
height:56px;
}
.men_tp{
width:900px;
float:left;
display:inline;
padding:24px 0px 0px 70px;
}
.men_tp a{
float:left;
color:#686666;
font:bold 12px/15px tahoma;
text-decoration:none;
margin-left:25px;
}
.contecntA {
width: 400px;
height: 480px;
padding-top: 60px;
font-family: Candara;
font-variant: normal;
}
.contPersz {
width: 990px;
height: 900px;
margin-bottom: 10px;
margin-top: 210px;
padding-right: 10px;
margin-left:70px;
}
.imggsas
{
margin-left: 40px;
width:240%;
margin-top: -30px;
}
.img_wrperas
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: -90px;
margin-left: 35px;
}
.corporate
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: 80px;
margin-left: 35px;
}
.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;
border-right: 1px solid #54879d;
width: 109%;
margin: 0px;
padding: 0px;
}
.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 {
margin-top:-50px;
margin-left:130px;
display:block;
}
.b:hover .a {
visibility:visible;
display:block;
}
.a {
margin-top:-5px;
visibility:hidden;
display:none;
}
.topnaviation
{
float:right;
display:inline-block;
margin-right: 400px;
}
div.topnaviationleft ul {
list-style: none outside none;
margin-left: 0px;
display:inline-block;
}
div.topnaviationleft li {
float: left;
}
.indxim
{
width:1050px;
height:800px;
margin-top: -20px;
}
.blankSeparator {
margin:10px 0;
display: block;
}
<body>
<div id="headerrrr">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Us</a></li>
<li><a href="#">+603 2201 1665</a></li>
</ul>
</div>
<div id="wh_bg">
<div id="bg_bg">
<div><a href="#"><img class="logo" src="images/logo.png" alt="" width="320" height="60" /></a></div>
<div class="social">
<ul>
<li>Connect US :</li>
<li><a href="https://www.facebook.com/gltrinternational?notif_t=fbpage_fan_invite"><img src="images/fb.jpg" alt="facebook" /></a></li>
<li><a><img src="images/linkde.jpg" alt="facebook" /></a></li>
</ul>
</div>
<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</a>
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul class="c">
<li class="a"> <a href="#">Link</a>
</li>
</ul>
</li>
<li><a href="Data_collec_services.htm">Data Collection Services</a>
</li>
<li><a href="Proof_Edit.html">Editing & Proof Reading</a>
</li>
</ul>
</li>
<li id="active"><a href="contact.html">CONTACT US</a>
</li>
</ul>
</div>
<div align="center">
<img class="imaeslidr" src="images/Slider Animation/Slider2.gif" alt="" width="1050" height="375" />
</div>
<div class="blankSeparator"> </div>
<div class="indxim" style="background-image: url('images/Malaysian-Flag.png'); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> is a consulting firm that offers training and research services in whole disciplinesof studies. Its goal is to provide a platform for Young Scholar, Academic & Corporate Researcher, and Trainers to discuss and frame strategies for the betterment of their goals and organization success...</p>
<h2 class="hindx">Training</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> offers broad range of academic and corporate Seminar programs for all public and private sector Universities and Companies. Global Academy of Training and Research goals is to uplift individual’s skills...</p>
<h2 class="hindx">Research</h2>
<p class="paraindex"><strong>Global Academy of Training and Research </strong>provides customized information and research collation to bring innovative and provocative insight into any emerging agenda for our clients. We excel in delivering insight needed to perform....</p>
</div>
<div class="sidebar">
<h2 class="indxparaz">HOT LINKS</h2>
<ul class="sidebar">
<li><a href="Upcomngevents.html">Up Coming Events</a></li>
<li><a href="Member_ship.html">Membership</a></li>
<li>Registration</li>
<li><a href="Personnel.html">Our Personnel</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
<br /><br />
<h2 class="indxparaz2">Our Personnel</h2>
<span class="con_txtslider"> <img src="images/personeslider.gif" alt="" /> </span></div>
</div>
</div>
<div class="blankSeparator"> </div>
<div class="footer22">
<h2 class="footerhead">Newsletter</h2>
<hr /><input id="Text1" class="footertxt" type="text" /><br /> <input id="Submit1" class="footerbutton" type="submit" value="submit" />
<div>
<h2 class="footerhead1">UpComing Events</h2>
<div class="foopara2"><a class="eventss" href="Upcomngevents.html">Events Available</a></div>
</div>
<h2 class="footerhead2">Contact Us</h2>
<div class="foopara">Call now to find out how: +603 2201 1665 [email protected]</div>
<br /><br />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, Global Acdemy of Training & Research</p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: +603 2201 1665 E:[email protected]</p>
</div>
</div>
</div>
</div>
</body>
</html>
所以我如何解决这个菜单和子菜单？
始终在屏幕的顶部：
headerrr一些事情else ... headerr div在wh_bg类之前关闭... – capricongurl 2014-10-16 18:15:31
将相同样式应用于#wrap – 2014-10-16 18:18:52