我需要添加到CSS样式表中以确保：
这是我到目前为止所拥有的;
#nav{
background-color:#0D0155;
margin-top:5px;
margin-bottom:5px;
}
#navWrapper{
text-align:center;
margin:0 auto;
}
#nav ul{
list-style-type:none;
margin:0;
padding:0;
position:relative;
font-size:0px;
}
#nav ul li{
display:inline-block;
}
#nav ul li a{
font-size:14px;
color:white;
}
#nav ul li:hover{
background-color:#DFD0DC;
}
#nav ul li a,visited{
padding:15px;
display:block;
text-decoration:none;
}
#nav ul li:hover ul{
display:inline-block;
left:0px;
right:0px;
z-index:999;
border-style:solid;
border-width:10px;
border-color:#DFD0DC;
background-color:white;
text-align:left;
padding-bottom:20px;
-webkit-transition:height 200ms ease-in;
-moz-transition:height 200ms ease-in;
-o-transition:height 200ms ease-in;
transition:height 200ms ease-in;
}
#nav ul li:hover ul input{
width:100%;
/*height:32px;*/
border-style:solid;
padding:7px 5px 7px 25px;
border-color:grey;
border-width:2px;
margin-top:-10px;
color:black;
position:relative;
}
#nav ul li:hover ul input placeholder{
color:black !important;
}
#nav ul li:hover ul a{
padding:5px;
padding-left:0px;
margin:0px;
float:none;
color:#0045BF;
}
#nav ul li:hover ul a:hover{
text-decoration:underline;
cursor:pointer;
color:red;
}
#nav ul ul{
display:none;
position:absolute;
overflow: hidden;
}
#nav ul li:hover > a{
background-color:#DFD0DC;
color: #0D0155;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="nav">
<div id="navWrapper">
<ul>
<li><a style="background-color:#555454;" href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<!--<li><a class="search-dropdown-div-click" href="#"><i class="fa fa-search"></i></a></li>-->
<li><a href="#"><strong>Our services</strong></a>
<ul>
<div class="col-md-12">
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">ISA Accounts</div>
<a href="#">Browse our ISA accounts</a>
<a href="#">Junior ISA Accounts</a>
<a href="#">Current Interest Rates</a>
<a href="#">ISA Costs & Charges</a>
<a href="#"><strong>Investor Information</strong><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
<div class="main-menu-column-header-non-link">Currency Services</div>
<a href="#">Curerncy trading</a>
<a href="#">Spread betting</a>
<a href="#">Currency Spreads</a>
<a href="#">Trading Commissions</a>
<a href="#">Investor Information<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header"><a href="#">Pension Services<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Drawdowns</a>
<a href="#">Annuities</a>
<a href="#"><b>Browse our pension funds</b><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
<a href="#"><b>Investor Information<i class="fa fa-angle-double-right" aria-hidden="true"></i></b></a>
<div class="main-menu-column-header"><a href="#">Share dealing<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Trading Costs</a>
<a href="#">Assets</a>
<a href="#">FTSE 100</a>
<a href="#">FTSE 250</a>
<a href="#">FTSE 350</a>
<a href="#"><b>Investor Information<i class="fa fa-angle-double-right" aria-hidden="true"></i></b></a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header"><a href="#">Our Funds<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Fund search</a>
<a href="#">Browse our funds</a>
<a href="#">Income funds</a>
<a href="#">Growth funds</a>
<a href="#">Mutusl Funds</a>
<a href="#">OEIC's</a>
<a href="#">Investment Trusts</a>
<div class="main-menu-column-header"><a href="#">Enterprise Investing<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Venture Capital Trusts</a>
<a href="#">Enterprise Investment Schemes</a>
<a href="#">Tax investives</a>
<a href="#">Risk Disclaimer</a>
</div>
<div class="main-menu-column col-md-3">
<div class="row main-menu-rotating-advert">
<div class="col-md-12">
<div class="bs-example" data-example-id="simple-carousel">
<div class="carousel slide" id="carousel-example-generic-main-menu" data-ride="carousel" data-pause="hover">
<ol class="carousel-indicators main-menu-indicators">
<li data-target="#carousel-example-generic-main-menu" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-generic-main-menu" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-generic-main-menu" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="main-menu-slide-1 main-menu-image-item item active">
<div class="bottom-text-box">
<h4><b>Is this the real life.</b></h4>
<p>I say, what about breakfast at Tffanys</p>
<p style="font-size: 10px!important;">We will not sell or disseminate your data to any third party.</p>
<a href="#">Find out more<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="main-menu-slide-2 main-menu-image-item item">
<div class="bottom-text-box">
<h4><b>Is this just fantasy.</b></h4>
<p>She said "I think I remember the film.."</p>
<a href="#">Find out more<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="main-menu-slide-3 main-menu-image-item item">
<div class="bottom-text-box">
<h4><b>Calling a landslide.</b></h4>
<p>Find out how much your pension is worth with our free checker.</p>
<p style="font-size: 10px!important;">Terms & conditions apply.</p>
<a href="#">Find out more<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#"><strong>Fund research</strong></a>
<ul>
<div class="col-md-12">
<div class="main-menu-column col-md-6">
<div class="main-menu-column-header-non-link">Search our Funds</div>
<p><strong>Search our range of available funds, or go to our <a style="display:inline;" href="#">advanced section.</a></strong></p>
<form action="" class="search-form" >
<input type="text" class="form-control" name="search" id="search" placeholder="Search for a stock by name or ticker symbol">
<p><a style="display:inline;" href="#">Recently searched funds<i class="fa fa-search" aria-hidden="true"></i></a></p>
</form>
</div>
<div class="col-md-6 main-menu-column">
<div class="main-menu-static-1">
<div class="main-menu-static-text-box">
<h4><b>Find out how much your pension is worth.</b></h4>
<p>Take a look at my girlfriend, she's the only one I've got.</p>
<a href="#">Read more<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="col-md-3 main-menu-column"></div>
</div>
</ul>
</li>
<li><a href="#"><b>Share prices & stock markets</b></a>
<ul>
<div class="col-md-12">
<div class="row">
</div>
<div class="main-menu-column col-md-6">
<div class="main-menu-column-header-non-link">Search for a stock</div>
<p><strong>Search ur range of available funds, or go to our <a style="display:inline;" href="#">advanced section.</a></strong></p>
<form action="" class="search-form" >
<input type="search" class="form-control" name="funds-search" placeholder="Search for a fund or ISBN..">
<p><a style="display:inline;" href="#">Recently searched stocks<i class="fa fa-search" aria-hidden="true"></i></a></p>
</form>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header"><a href="#">Browse our shares<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Leaders & Laggagrds</a>
<div class="main-menu-column-header"><a href="#">Market News<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Director Dealings</a>
<a href="#">AIM Funds</a>
<a href="#">Newspaper roundup</a>
<a href="#">Financial diary</a>
<a href="#">Corporate actions</a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">Other investments</div>
<a href="#">Venture Capital Trusts</a>
<a href="#">Enterprise Investment Schemes</a>
<a href="#">Venture Capital Funds</a>
<a href="#">Tax benefits & sacrifices</a>
</div>
</div>
</ul>
</li>
<li><a href="#"><b>Newsroom</b></a>
<ul>
<div class="col-md-12">
<div class="col-md-12"><div style="font-size:30px !important;" class="main-menu-column-header-non-link">Featured news.</div></div>
</div>
<div class="col-md-12">
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">Header 1</div>
<a href="#">Whatever</a>
<a href="#">Whatever</a>
<a href="#">Whatever</a>
<a href="#">Whatever</a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header"><a href="#">Header 2<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Whatever</a>
<a href="#">Whatever</a>
<a href="#">Whatever</a>
<a href="#">Whatever</a>
<div class="main-menu-column-header-non-link">Test Header</div>
<a href="#">Whatever</a>
<a href="#"><b></b>Whatever</a>
<a href="#"><b>Whatever</b></a>
</div>
<div class="main-menu-column col-md-6">
<div class="main-menu-column-header col-md-12"><a href="#">Header 3 <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<div class="main-menu-column col-md-6">
<a href="#">Test</a>
<a href="#">Test</a>
<div class="main-menu-column-header-non-link">Test Header</div>
<a href="#">Test</a>
</div>
<div class="main-menu-column col-md-6">
<a href="#">Test</a>
<a href="#">Test</a>
<a href="#">Test</a>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#"><b>Planning & guidence</b></a>
<ul>
<div class="col-md-12">
<div class="col-md-12"><div style="font-size:30px !important;" class="main-menu-column-header-non-link">Planning & guidence.</div></div>
</div>
<div class="col-md-12">
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">Planning for the future</div>
<a href="#">Planning your future</a>
<a href="#">Retirement & Savings</a>
<div class="main-menu-column-header"><a href="#">Investor relations<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Share prices</a>
<a href="#">Invest in our business</a>
<a href="#">Private Shareholdings</a>
<a href="#">Become an Investor</a>
<a href="#">Careers</a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">Retirement & Savings</div>
<a href="#">Your pension options</a>
<a href="#">Later Life</a>
<a href="#">401(K)</a>
<a href="#">Transfer your pension</a>
<div class="main-menu-column-header-non-link">Market Watch</div>
<a href="#">FTSE 100</a>
<a href="#">FTSE 250</a>
<a href="#">FTSE 350</a>
<a href="#">AIM Markets</a>
</div>
<div class="main-menu-column col-md-6">
<div class="col-md-12 banner">
<div class="banner-text col-md-6"></div>
<div class="banner-caption col-md-6"><p>The value of your investments can go downwards as well as upwards, therefore, you may not get back the amount you initially invested.</p></div>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#"><strong>Pensions & Savings</strong></a>
<ul>
</ul>
</li>
</ul><!--End of Main Menu tag-->
</div><!--End of navWrapper tag-->
</div><!--End of nav tag-->
答案 0 :(得分：1)
1）使用transition-delay css属性
div {
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
2）尝试将transform：translateX（）添加到悬停类
div:hover {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
希望有所帮助！