我见过很多类似的问题,但还没有找到问题的答案。
我需要让这个菜单下拉菜单对页面做出响应,但由于它是绝对的,我不知道如何做到这一点。使用JS不是问题。任何解决方案都可以。
header{
nav{
min-width: 280px;
max-width: 479px;
margin: 0 auto;
clear: both;
position: relative;
.logo{
padding: 13px 0 10px 9px;
float: left;
}//End of logo
ul{
list-style-type: none;
border-bottom: 2px solid $white;
margin-bottom: 6px;
li{
line-height: 23px;
.nav-img{
line-height: 50px;
float: right;
margin-right: 18px;
}
.nav-content{
position: absolute;
top: 60px;
overflow: hidden;
background-color: $dropdownColor;
//margin: 0 auto;
min-width: 280px;
//width: 100%;
max-width: 440px;
padding: 0px 20px;
max-height: 0px;
.arrow{
float: right;
padding-top: 13px;
}
.nav-sub{
.second-menu{
li{
font-size: 12px;
display: inline-block;
line-height: 8px;
}
li+li:before {
padding: 2px;
color: $white;
content: "/\00a0";
}
}
a{
display: inline-block;
text-decoration: none;
color: $white;
font-weight: bold;
}
input{
width: 100%;
padding: 5px;
border: none;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
background-position: center right 10px;
margin: 15px 0;
}
}
}
}
li:first-child{
padding-top: 13px;
}
li:last-child{
padding-bottom: 20px;
}
}//End of menu
}//End of nav
}//End of header
<header>
<nav>
<div class="logo">
<a href="#"><img src="./images/logo.png" alt="Error loading image!"></a>
</div>
<ul>
<li>
<a href="#" class="nav-img"><img src="./images/menu_shape.png" alt="Error loading image!"></a>
<div class="nav-content">
<a class="arrow" href=""><img src="./images/dropdown_arrow.png" alt="Error loading image!"></a> <div class="nav-sub">
<ul>
<li><a href="#">About Us</a>
<!--<ul>
<li><a href="">Production</a></li>
<li><a href="">Energy & Commodities</a></li>
<li><a href="">Transport</a></li>
<li><a href=""></a>Industrial Services</li>
</ul>-->
</li>
<li><a href="#">Divisions</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Corporate Responsibility</a></li>
</ul>
<ul class="second-menu">
<li><a href="">Home</a></li>
<li><a href="">Media Centre</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<input type="search" placeholder="Search">
</div>
</div>
</li>
</ul>
</nav>
</header>
以下是图片。
我知道我可以用像素表示宽度,但它的响应速度不会超过。
