我希望我的菜单越过标题和页面,但在我的情况下,当我点击菜单时,我有一个菜单,它将标题下方的整个元素放下并使标题更大
这是我的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;
这是我所拥有的屏幕:
这里是我想要的预览:
我尝试了很多不同的东西,但似乎没有任何工作
我也在使用jquery mobile和jQuery naver plugin
答案 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;
}