iPad上的菜单无法正常显示

时间:2014-05-10 07:42:23

标签: html css responsive-design

嗨我不知道我做错了什么,但是我的菜单在iPad肖像中被剔除时没有崩溃。 这是我的网址 http://www.spheretekk.com/glamrs/

这是我的截图 enter image description here

@media only screen and (min-width:768px) { 
.mobile_collapser { display: none }
.menu_container {
   /*height: 36px;
    padding-left: 10px;
    padding-right: 10px;*/
}
.menu_container>ul {
    transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    height: 44px;
    background: 0;
    overflow: hidden;
}
.menu_container>ul>li {
    position: static;

    background: inherit;
}
.menu_container>ul>li:hover {}
.menu_container>ul>li>a {
    box-shadow: none;
    border-right: 0;
}
.menu_container .menu_dropdown_block {
    position: absolute;
    opacity: 0;
}
.menu_container>ul>li:hover>.menu_dropdown_block {
    overflow: visible;
    opacity: 1;

}
.menu_container>ul>li.right { float: right }
.menu_container .menu_dropdown_block .column { float: left }
.menu_container .menu_dropdown_block .column.bordered { border-right: 1px solid #ddd }
ul.menu_submenu_block>li>.menu_submenu_block {
    position: absolute;
    top: 0;
    height: auto;
    min-width: 160px;
    left: 100%;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2),inset 1px 0 0 rgba(0,0,0,0.1);
    background: #fff;
}
.menu_container .menu_dropdown_block>ul.menu_submenu_block>li>ul.menu_submenu_block { margin-left: 0 }
ul.menu_submenu_block>li>.menu_submenu_block a { padding-left: 20px !important }
ul.menu_submenu_block.right-align li a { text-align: right }
ul.menu_submenu_block.right-align li.has-dropdown>a:after {
    content: '\2039';
    right: auto;
    left: 10px;
}
ul.menu_submenu_block.right-align li a .fa {
    margin-right: 0;
    margin-left: 6px;
}
ul.menu_submenu_block.right-align>li .menu_submenu_block {
    left: auto;
    right: 100%;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
ul.menu_submenu_block.right-align li.has-dropdown>a:after {
    content: '\2039';
    right: auto;
    left: 10px;
}
.menu_container .menu_dropdown_block .column.span1 { width: 100% }
.menu_container .menu_dropdown_block .column.span2 { width: 50% }
.menu_container .menu_dropdown_block .column.span3 { width: 33% }
.menu_container .menu_dropdown_block .column.span4 { width: 25% }
.menu_container .menu_dropdown_block .column.span5 { width: 20% }
.menu_container .menu_dropdown_block .column.span6 { width: 16% }
.menu_container .menu_dropdown_block .column.span10per { width: 10% }
.menu_container .menu_dropdown_block .column.span20per { width: 20% }
.menu_container .menu_dropdown_block .column.span30per { width: 30% }
.menu_container .menu_dropdown_block .column.span40per { width: 40% }
.menu_container .menu_dropdown_block .column.span50per { width: 50% }
.menu_container .menu_dropdown_block .column.span60per { width: 60% }
.menu_container .menu_dropdown_block .column.span70per { width: 70% }
.menu_container .menu_dropdown_block .column.span80per { width: 80% }
.menu_container .menu_dropdown_block .column.span90per { width: 90% }


}
.menu_container.topfixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
border-radius: 0;
}
.menu_container.centered>ul {
float: none;
margin: 0 auto;
max-width: 1000px;
}
.menu_container.green {
  /*  background: #000;
border-bottom:5px solid #c71d22;*/
}
.menu_container.green>ul>li:hover>a {color:#DA5051;}
.menu_container.green>ul>li>.menu_dropdown_block p.links a { color: #657f40 }
.menu_container.green>ul>li>.menu_dropdown_block p.links a:hover {
color: #43552b;
border-bottom: 1px dotted #657f40;
}
.menu_container.green ul.menu_submenu_block li:hover>a { background: #9cad2e }
@media screen and (max-width: 1275px) {

}

@media screen and (max-width:768px) {
.menu_container>ul {
height:0;
}
}

0 个答案:

没有答案