html - imageslider 在 html css 中下降

Question

我在这里尝试修复子菜单。当我在菜单上拖动光标时，菜单下方的图像 slider 下降。

这是图片 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 &amp; 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">&nbsp;</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 &amp; 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&rsquo;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">&nbsp;</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 info@gatrenterprise.com</div>
    <br /><br />
    <div class="ffpara">
    <p class="ffpara">&copy; Copyright 2014, Global Acdemy of Training &amp; Research</p>
    </div>
    <div class="ffpara2">
    <p class="ffpara2">T: +603 2201 1665 E:info@gatrenterprise.com</p>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

那么我该如何修复这个菜单和子菜单呢？？

Answer 1

将此属性添加到您的#headerrrr 和#wrap:

始终在屏幕顶部:

#wrap{
    position:fixed;
    top:0;
}

在网站的顶部:

   #wrap{
        absolute;
        top:0;
    }