标题上的下拉菜单,只允许菜单翻页并保持标题静态

时间:2015-03-17 14:34:51

标签: jquery html css

我希望我的菜单越过标题和页面,但在我的情况下,当我点击菜单时,我有一个菜单,它将标题下方的整个元素放下并使标题更大

这是我的HTML:

 <div id="header" data-role="header">       
 <div style="width: 30%" id="menuDrop">
<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>
</div> 
</div>

这里是css:

#header{
/*     overflow: visible; Let menu content overflow outside the header */
/*     margin-top: 1em; */
/*     border-radius: 0; /* Make the menu button squarish */
/*     position: relative; Position absolutely */
/*     display: none; Hide */
/*     z-index:500; Ensure visibility over other elements on page */
/*     margin-top: 0px; Bring menu closer to button; not needed on mobile */
/*     width: 100%; Fixed width menu items */
/*     white-space: normal; Stop long menu names from truncating */
/*     display: block;  */
    background-color: black;

}




.naver {
}
.naver a {
background: #254960 !important;
color: #fff !important;
display: block !important;
float: left !important;
font-size: 16px !important;
line-height: 40px !important;
margin: 0 1px 0 0 !important;
padding: 0 20px !important;
}
.naver.enabled a {
float: none !important;
margin: 0 0 1px 0 !important;
width: 100% !important;
}

a:hover
{
  text-decoration:none !important;
}

a:click
{
  text-decoration:none !important;
}

media="all"
.naver .naver-handle:before {
  background: url(jquery.fs.naver-icon.png) no-repeat center !important;
  content: '' !important;
  display: block !important;
  float: left !important;
  height: 15px;
  margin: 7px 10px 0 0 !important;
  width: 20px !important;

这是我所拥有的屏幕:

enter image description here

这里是我想要的预览:

enter image description here

我尝试了很多不同的东西,但似乎没有任何工作

我也在使用jquery mobile和jQuery naver plugin

1 个答案:

答案 0 :(得分:1)

尝试更改HTML中的HTML:

 <div style="width: 30%" id="menuDrop">
<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

</div>

和CSS in:

#header{

    width:100%;
    position:relative;
    z-index:500;
    top:0px;
    height:50px;
    background:black;
    border:1px solid #CCC;
    margin:0px auto;

}

.naver {
    background-color: black !important;
    display: block;
    position:absolute;
    z-index:500;
}