我试图弄清楚如何让我们使用移动电话在顶部菜单下垂直显示子菜单，这将在顶部菜单按钮上显示点击结果，以扩展test2 LI下方的子菜单。
我确定它的显示器或者与LI或UL有关的东西很简单，但是我很难搞清楚它并且很难在这个网站上找到一个有效的例子，只有使用.btmenu和li https://jsfiddle.net/1t2fhdb9/20/才能在767px以下缩小帧
@media all and (min-width: 767px) {
/* MOBILE BROWSER THING*/
.menu{
width:60%;
}
a.menu-link {
display:none;
}
#mobmenu_hidden{
display:none;
}
header{
margin:0 auto;border: px solid purple;
width:80%;
display:table;
}
#logohold{
text-decoration: none;
width:30%;
border:px solid purple;
max-width:223px;
height:60px;
float:left;
margin-top:4px;
}
#logohold img{
text-decoration: none;
width:100%;
border:px solid purple;
max-width:223px;
height:60px;
}
#logohold a{
text-decoration: none;
}
#navhold{
margin:0 auto;
border: px dotted black;
width:80%;
display:table;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
min-height:100px; /* This should be equal to the height of your header */
}
#fixednav{
background-color:#00AFEA !important;
border: px solid green;
top: 0px;
width: 100%;
z-index:5;
box-shadow: 0px 1.5px 0px BLACK;
}
.main {
border: px solid red;
z-index:2;width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .main {
padding-top: 102px;
}
#navtop{
float:right;
line-height:60px;
border: px solid blue;
width:85%;
height:60px;
background-color:#00AFEA !important;
}
span.telem{
background:url('') no-repeat no-repeat ;
background-repeat: no-repeat;
background-position: 0.0em;
background-size: 26px 26px;
padding-left: 30px;
}
span .telem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:15px;
}
#tpmenu3{border: px solid yellow;
text-transform: uppercase;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height:100%;
width:60%;
margin:0 auto;
}
#tpmenu3 li {margin:0 auto;border: px solid red;
height:100%;
}
.hr{margin:0 auto;width:160px;text-align:left;margin-left:-5px;}
.active{
background-color:#000 !important;
color:#FFF!important;
}
#tpmenu3 li a {color:#0094c8;border: px solid yellow;
padding-left:5%;
padding-right:5%;
text-align: center;
font-size:12px;
white-space: nowrap ;
text-decoration: none;
}
#btmenu1{
border: px solid yellow;
margin: auto;
z-index:;
width:100%;
list-style: none;
margin:0;
padding:0;
height:30px;
text-align:right;
float:right;
}
ul#btmenu1 > li{
padding:0;
margin:0;
display: inline;
}
#btmenu1 li > a{
height:30px;
line-height:30px;
margin-left:1%;
margin-right:1%;
text-align:center;
display:inline-block;
text-decoration:none;
font-weight:;
font-size:11px;
color:#FFF;
padding-left:1%;
padding-right:1%;
text-transform:uppercase;
vertical-align: middle;
}
#btmenu1 > li > a:hover{
background-color:#333;
color:#FFF;
}
#phoneno{
text-decoration:none;
float:right;
}
/* SUB MENU */
#btmenu1 > li:hover .sub_menu{z-index:5;
position:absolute;
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:#666;
list-style: none;
margin:0;
padding:0;
display:table;
padding-right:3px;
border:#333 solid 2px;
border-radius: 4px;
}
li.top_quote {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
position:absolute;
}
.top_quote:hover > ul.submenu {
display:block;
}
.headleft{border: px solid green; }
#navbot{
width:100%;
border: px solid green;
}
#navagation{
width:100%;
border: px solid red;
}
.btmenu {
display: flex;
justify-content:space-between;
list-style: none;
border:px solid green;
}
ul.btmenu > li{
border: px solid yellow;
list-spadding:15px;
style-type: none;
padding:8px;
}
.btmenu li > a{border:px solid red;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size: 1.0vw;
padding:8px;
text-transform:uppercase;
vertical-align: middle;
white-space: nowrap;
}
#btmenu:hover > ul.submenu {
position:absolute;
display:inline-block;/*no need for height or width*/
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:;
list-style: none;
margin:0;
padding:0;
display:table;
border:#333 solid 2px;
border-radius: 4px;
}
.btmenu > li > a:hover{/*backgorund color on hover*/
background-color:#333;
color:#FFF;
}
/* SUB MENU */
.submenu{z-index:5;
background-color: #00AFEA !important;/*not shown unless hover*/
border:#333 solid 1px;
display:none;
padding:5px 5px 0 0;
}
.btmenu > li:hover .submenu{
margin: 0;
padding: 0;
color:#FFF;
list-style-type: none;
}
.submenu li{ border: px solid green;
margin: 0;
padding:0;
width:100%;
float:left;
display:block;
vertical-align: middle;
}
.submenu li a{ border: px solid pink;margin: 0;
padding: 15px;
position: relative;
display:block;
vertical-align: middle;
text-decoration:none;
color:#000;
}
.submenu > li > a:hover{/*backgorund color on hover*/
background-color: #FFF;
}
}
@media all and (max-width: 766px) {
/* start of tablet styles */
/* FOOTER */
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
}
.translation-links {
}
.translation-links img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
cursor: pointer;
height:24px;
width:24px;
}
.translation-links img:hover {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
}
/* CSS Document */
html,body{
font-family: 'Montserrat', sans-serif;
color:#000;
}
/* unvisited link */
a:link {
color:#000;
}
/* visited link */
a:visited {
color:#000;
}
/* mouse over link */
a:hover {
color:#000;
}
/* selected link */
a:active {
color:#000;
}
a, img {
border:none;
outline:none;
}
/* CSS Document */
html,body{
font-family: 'Montserrat', sans-serif;
padding:0px;
margin:0px;
height:100%;
width:100%;
}
/* MOBILE BROWSER THING*/
.menu{
width:60%;
}
a.menu-link {
display:none;
}
header{
margin:0 auto;border: px solid purple;
width:100%;
display:table;
}
#logohold{
}
#logohold img{
text-decoration: none;
width:35%;
margin-top:5px;
margin-left:5px;
margin-bottom:5px;
border: px solid green;
max-width:220px;
height:100%;
float:left;
}
#logohold a{
text-decoration: none;
}
#mobmenu_hidden{
display: inline-block;border: 1px dotted black;
float:right;
margin-right:10px;
padding:5px;
position: relative;
top: 45%;
transform: perspective(1px) translateY(45%);
cursor: pointer;
}
#navhold{
margin:0 auto;
border: px dotted black;
width:100%;
display:table;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
min-height:100px; /* This should be equal to the height of your header */
}
#fixednav{
background-color:#00AFEA !important;
border: px solid green;
top: 0px;
width: 100%;
z-index:5;
box-shadow: 0px 1.5px 0px BLACK;
}
.main {
border: px solid red;
z-index:2;width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .main {
padding-top: 102px;
}
#navtop{
float:right;
line-height:60px;
border: px solid blue;
width:85%;
height:60px;
background-color:#00AFEA !important;
}
span.telem{
background:url('') no-repeat no-repeat ;
background-repeat: no-repeat;
background-position: 0.0em;
background-size: 26px 26px;
padding-left: 30px;
}
span .telem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:15px;
}
#tpmenu3{border: px solid yellow;
text-transform: uppercase;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height:100%;
width:60%;
margin:0 auto;
}
#tpmenu3 li {margin:0 auto;border: px solid red;
height:100%;
}
.hr{margin:0 auto;width:160px;text-align:left;margin-left:-5px;}
.active{
background-color:#000 !important;
color:#FFF!important;
}
#tpmenu3 li a {color:#0094c8;border: px solid yellow;
padding-left:5%;
padding-right:5%;
text-align: center;
font-size:12px;
white-space: nowrap ;
text-decoration: none;
}
#btmenu1{
width:99%;
border: px solid yellow;
margin: auto;
z-index:;
list-style: none;
margin:0;
padding:0;
text-align:center;
display:table;
}
ul#btmenu1 > li{
float: right;
border: px solid green;
width:48%;
text-align:center;
padding:0;
margin:0;
}
#btmenu1 li > a{
width:98%;
border: px solid red;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
font-size:11px;
color:#FFF;
display:block;
text-transform:uppercase;
}
#btmenu1 > li > a:hover{
background-color:#333;
color:#FFF;
}
#phoneno{
text-decoration:none;
float:right;
}
/* SUB MENU */
#btmenu1 > li:hover .sub_menu{
z-index:5;
position:absolute;
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:#666;
list-style: none;
margin:0;
padding:0;
display:table;
padding-right:3px;
border:#333 solid 2px;
border-radius: 4px;
}
li.top_quote {
position:relative;
}
ul.submenu {
display:none;
position:absolute;
}
.top_quote:hover > ul.submenu {
display:block;
}
.headleft{border: px solid green; }
#navbot{
width:100%;
border: px solid green;
}
#navagation{
width:100%;
border: px solid red;
}
#navagation{
display:none;
float:right;
width:100%;
margin:0;
padding:0;
}
#btmenu{
display:table;
z-index:1;
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
text-align:center;
}
ul#btmenu > li{
padding:0;
margin:0;
}
#btmenu li > a{
height:50px;
width:96%;
line-height:50px;
text-align:center;
display:inline-block;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:#000;
text-transform:uppercase;
vertical-align: middle;
background-color:#666;
border:#333 solid 2px;
border-radius: 4px;
margin:3px;
}
#btmenu > li > a:hover{
background-color:#333;
color:#FFF;
}
/* SUB MENU */
.sub_menu{
display:none;
}
#top_menu_phonem{
height:100%;
line-height:350%;
text-decoration:none;
float:right;
clear:right;
margin-right:2%;
}
#top_menu_phonem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:13px;
}
span.telem{
background:url('../images/icon_phone.png') no-repeat no-repeat ;
background-repeat: no-repeat;
background-position: 0.0em;
background-size: 26px 26px;
padding-left: 25px;
}
span .telem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:15px;
}
#top_menu_phone{
display:none;
}
}
@media all and (min-width: 767px) {
/*left*/
.hidden { display: none; }
.zipform{margin-bottom:18px;}
.container {
width:100%;
border: 2px solid #d3d3d3;
}
}
/* start of tablet styles */
@media all and (max-width: 766px) {
.hidden { display: none; }
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<html lang="en" class="no-js">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="canonical" href="" />
<title>test</title>
<link rel="stylesheet" href="css/style3.css" type="text/css" />
<link rel="stylesheet" href="css/index3.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mobmenu_hidden").click(function(){
$("#navagation").toggle();
});
});
$(document).ready(function() {
$('#blah').removeClass('hidden');
});
</script>
</head>
<body>
<div id="fixednav">
<!----------------------------------------------------------------HEADER---------------------------------------------------------------->
<header>
<div id="navhold">
<div id="logohold"><a href="index.php"><img src="logo" alt="logo" /></a></div><!--headleft-->
<div id="mobmenu_hidden">MENU</div><!--mobmenu_hidden-->
<div id="navbot">
<div id="navagation">
<ul class="btmenu">
<li class="top_quote"><a href="QuoteLanding.php">test1</a></li>
<li class="top_quote"><a href="QuoteLanding.php">top menu</a>
<ul class="submenu">
<li class="subitem"><a href="Auto.php">submenu1</a></li>
<li class="subitem"><a href="SR-22.php">submenu</a></li>
<li class="subitem"><a href="Life.php">submenu</a></li>
<li class="subitem"><a href="Home.php">submenu</a></li>
<li class="subitem"><a href="Renters.php">submenu</a></li>
<li class="subitem"><a href="Business.php">submenu</a></li>
</ul>
</li>
<li class="top_quote"><a href="Learning.php">test2</a> </li>
<li class="top_quote"><a href="index.php#WhySolid">test3</a></li>
</ul>
</div><!--navagation-->
</div><!--navbot-->
</div><!--navhold-->
</header><!--header-->
</div><!--fixed nav-->
<div class="main">
<!----------------------------------------------------------------/FOOTER---------------------------------------------------------------->
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = fixednav.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
fixednav.classList.add("sticky");
} else {
fixednav.classList.remove("sticky");
}
}
</script>
<script>
$(".learn").click(function() {
$learn = $(this);
//getting the next element
$content = $learn.closest(".wrap1").next().find(".content");
$test = $learn.closest(".test").next().find(".test");
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$learn.text(function() {
//change text based on condition
return $content.is(":visible") ? "Learn less!" : "Learn More!";
});
});
});
</script>
</div><!--main-->
</body>
</html>你的意思是打开topmenu li hover上的子菜单并在topmenu li和test2 li之间显示它？如果是，这只是从子菜单类样式中删除position：absolute。
@media all and (min-width: 767px) {
/* MOBILE BROWSER THING*/
.menu{
width:60%;
}
a.menu-link {
display:none;
}
#mobmenu_hidden{
display:none;
}
header{
margin:0 auto;border: px solid purple;
width:80%;
display:table;
}
#logohold{
text-decoration: none;
width:30%;
border:px solid purple;
max-width:223px;
height:60px;
float:left;
margin-top:4px;
}
#logohold img{
text-decoration: none;
width:100%;
border:px solid purple;
max-width:223px;
height:60px;
}
#logohold a{
text-decoration: none;
}
#navhold{
margin:0 auto;
border: px dotted black;
width:80%;
display:table;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
min-height:100px; /* This should be equal to the height of your header */
}
#fixednav{
background-color:#00AFEA !important;
border: px solid green;
top: 0px;
width: 100%;
z-index:5;
box-shadow: 0px 1.5px 0px BLACK;
}
.main {
border: px solid red;
z-index:2;width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .main {
padding-top: 102px;
}
#navtop{
float:right;
line-height:60px;
border: px solid blue;
width:85%;
height:60px;
background-color:#00AFEA !important;
}
span.telem{
background:url('') no-repeat no-repeat ;
background-repeat: no-repeat;
background-position: 0.0em;
background-size: 26px 26px;
padding-left: 30px;
}
span .telem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:15px;
}
#tpmenu3{border: px solid yellow;
text-transform: uppercase;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height:100%;
width:60%;
margin:0 auto;
}
#tpmenu3 li {margin:0 auto;border: px solid red;
height:100%;
}
.hr{margin:0 auto;width:160px;text-align:left;margin-left:-5px;}
.active{
background-color:#000 !important;
color:#FFF!important;
}
#tpmenu3 li a {color:#0094c8;border: px solid yellow;
padding-left:5%;
padding-right:5%;
text-align: center;
font-size:12px;
white-space: nowrap ;
text-decoration: none;
}
#btmenu1{
border: px solid yellow;
margin: auto;
z-index:;
width:100%;
list-style: none;
margin:0;
padding:0;
height:30px;
text-align:right;
float:right;
}
ul#btmenu1 > li{
padding:0;
margin:0;
display: inline;
}
#btmenu1 li > a{
height:30px;
line-height:30px;
margin-left:1%;
margin-right:1%;
text-align:center;
display:inline-block;
text-decoration:none;
font-weight:;
font-size:11px;
color:#FFF;
padding-left:1%;
padding-right:1%;
text-transform:uppercase;
vertical-align: middle;
}
#btmenu1 > li > a:hover{
background-color:#333;
color:#FFF;
}
#phoneno{
text-decoration:none;
float:right;
}
/* SUB MENU */
#btmenu1 > li:hover .sub_menu{z-index:5;
position:absolute;
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:#666;
list-style: none;
margin:0;
padding:0;
display:table;
padding-right:3px;
border:#333 solid 2px;
border-radius: 4px;
}
li.top_quote {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
}
.top_quote:hover > ul.submenu {
display:block;
}
.headleft{border: px solid green; }
#navbot{
width:100%;
border: px solid green;
}
#navagation{
width:100%;
border: px solid red;
}
.btmenu {
display: flex;
justify-content:space-between;
list-style: none;
border:px solid green;
}
ul.btmenu > li{
border: px solid yellow;
list-spadding:15px;
style-type: none;
padding:8px;
}
.btmenu li > a{border:px solid red;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size: 1.0vw;
padding:8px;
text-transform:uppercase;
vertical-align: middle;
white-space: nowrap;
}
#btmenu:hover > ul.submenu {
position:absolute;
display:inline-block;/*no need for height or width*/
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:;
list-style: none;
margin:0;
padding:0;
display:table;
border:#333 solid 2px;
border-radius: 4px;
}
.btmenu > li > a:hover{/*backgorund color on hover*/
background-color:#333;
color:#FFF;
}
/* SUB MENU */
.submenu{z-index:5;
background-color: #00AFEA !important;/*not shown unless hover*/
border:#333 solid 1px;
padding:5px 5px 0 0;
}
.btmenu > li:hover .submenu{
margin: 0;
padding: 0;
color:#FFF;
list-style-type: none;
}
.submenu li{ border: px solid green;
margin: 0;
padding:0;
width:100%;
float:left;
display:block;
vertical-align: middle;
}
.submenu li a{ border: px solid pink;margin: 0;
padding: 15px;
position: relative;
display:block;
vertical-align: middle;
text-decoration:none;
color:#000;
}
.submenu > li > a:hover{/*backgorund color on hover*/
background-color: #FFF;
}
}
@media all and (max-width: 766px) {
/* start of tablet styles */
/* FOOTER */
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
}
.translation-links {
}
.translation-links img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
cursor: pointer;
height:24px;
width:24px;
}
.translation-links img:hover {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
}
/* CSS Document */
html,body{
font-family: 'Montserrat', sans-serif;
color:#000;
}
/* unvisited link */
a:link {
color:#000;
}
/* visited link */
a:visited {
color:#000;
}
/* mouse over link */
a:hover {
color:#000;
}
/* selected link */
a:active {
color:#000;
}
a, img {
border:none;
outline:none;
}
/* CSS Document */
html,body{
font-family: 'Montserrat', sans-serif;
padding:0px;
margin:0px;
height:100%;
width:100%;
}
/* MOBILE BROWSER THING*/
.menu{
width:60%;
}
a.menu-link {
display:none;
}
header{
margin:0 auto;border: px solid purple;
width:100%;
display:table;
}
#logohold{
}
#logohold img{
text-decoration: none;
width:35%;
margin-top:5px;
margin-left:5px;
margin-bottom:5px;
border: px solid green;
max-width:220px;
height:100%;
float:left;
}
#logohold a{
text-decoration: none;
}
#mobmenu_hidden{
display: inline-block;border: 1px dotted black;
float:right;
margin-right:10px;
padding:5px;
position: relative;
top: 45%;
transform: perspective(1px) translateY(45%);
cursor: pointer;
}
#navhold{
margin:0 auto;
border: px dotted black;
width:100%;
display:table;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
min-height:100px; /* This should be equal to the height of your header */
}
#fixednav{
background-color:#00AFEA !important;
border: px solid green;
top: 0px;
width: 100%;
z-index:5;
box-shadow: 0px 1.5px 0px BLACK;
}
.main {
border: px solid red;
z-index:2;width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .main {
padding-top: 102px;
}
#navtop{
float:right;
line-height:60px;
border: px solid blue;
width:85%;
height:60px;
background-color:#00AFEA !important;
}
span.telem{
background:url('') no-repeat no-repeat ;
background-repeat: no-repeat;
background-position: 0.0em;
background-size: 26px 26px;
padding-left: 30px;
}
span .telem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:15px;
}
#tpmenu3{border: px solid yellow;
text-transform: uppercase;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height:100%;
width:60%;
margin:0 auto;
}
#tpmenu3 li {margin:0 auto;border: px solid red;
height:100%;
}
.hr{margin:0 auto;width:160px;text-align:left;margin-left:-5px;}
.active{
background-color:#000 !important;
color:#FFF!important;
}
#tpmenu3 li a {color:#0094c8;border: px solid yellow;
padding-left:5%;
padding-right:5%;
text-align: center;
font-size:12px;
white-space: nowrap ;
text-decoration: none;
}
#btmenu1{
width:99%;
border: px solid yellow;
margin: auto;
z-index:;
list-style: none;
margin:0;
padding:0;
text-align:center;
display:table;
}
ul#btmenu1 > li{
float: right;
border: px solid green;
width:48%;
text-align:center;
padding:0;
margin:0;
}
#btmenu1 li > a{
width:98%;
border: px solid red;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
font-size:11px;
color:#FFF;
display:block;
text-transform:uppercase;
}
#btmenu1 > li > a:hover{
background-color:#333;
color:#FFF;
}
#phoneno{
text-decoration:none;
float:right;
}
/* SUB MENU */
#btmenu1 > li:hover .sub_menu{
z-index:5;
position:absolute;
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:#666;
list-style: none;
margin:0;
padding:0;
display:table;
padding-right:3px;
border:#333 solid 2px;
border-radius: 4px;
}
li.top_quote {
position:relative;
}
ul.submenu {
display:none;
}
.top_quote:hover > ul.submenu {
display:block;
}
.headleft{border: px solid green; }
#navbot{
width:100%;
border: px solid green;
}
#navagation{
width:100%;
border: px solid red;
}
#navagation{
display:none;
float:right;
width:100%;
margin:0;
padding:0;
}
#btmenu{
display:table;
z-index:1;
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
text-align:center;
}
ul#btmenu > li{
padding:0;
margin:0;
}
#btmenu li > a{
height:50px;
width:96%;
line-height:50px;
text-align:center;
display:inline-block;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:#000;
text-transform:uppercase;
vertical-align: middle;
background-color:#666;
border:#333 solid 2px;
border-radius: 4px;
margin:3px;
}
#btmenu > li > a:hover{
background-color:#333;
color:#FFF;
}
/* SUB MENU */
.sub_menu{
display:none;
}
#top_menu_phonem{
height:100%;
line-height:350%;
text-decoration:none;
float:right;
clear:right;
margin-right:2%;
}
#top_menu_phonem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:13px;
}
span.telem{
background:url('../images/icon_phone.png') no-repeat no-repeat ;
background-repeat: no-repeat;
background-position: 0.0em;
background-size: 26px 26px;
padding-left: 25px;
}
span .telem a{
height:100%;
display:block;
text-decoration:none;
color:red;
font-size:15px;
}
#top_menu_phone{
display:none;
}
}
@media all and (min-width: 767px) {
/*left*/
.hidden { display: none; }
.zipform{margin-bottom:18px;}
.container {
width:100%;
border: 2px solid #d3d3d3;
}
}
/* start of tablet styles */
@media all and (max-width: 766px) {
.hidden { display: none; }
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<html lang="en" class="no-js">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="canonical" href="" />
<title>test</title>
<link rel="stylesheet" href="css/style3.css" type="text/css" />
<link rel="stylesheet" href="css/index3.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mobmenu_hidden").click(function(){
$("#navagation").toggle();
});
});
$(document).ready(function() {
$('#blah').removeClass('hidden');
});
</script>
</head>
<body>
<div id="fixednav">
<!----------------------------------------------------------------HEADER---------------------------------------------------------------->
<header>
<div id="navhold">
<div id="logohold"><a href="index.php"><img src="logo" alt="logo" /></a></div><!--headleft-->
<div id="mobmenu_hidden">MENU</div><!--mobmenu_hidden-->
<div id="navbot">
<div id="navagation">
<ul class="btmenu">
<li class="top_quote"><a href="QuoteLanding.php">test1</a></li>
<li class="top_quote"><a href="QuoteLanding.php">top menu</a>
<ul class="submenu">
<li class="subitem"><a href="Auto.php">submenu1</a></li>
<li class="subitem"><a href="SR-22.php">submenu</a></li>
<li class="subitem"><a href="Life.php">submenu</a></li>
<li class="subitem"><a href="Home.php">submenu</a></li>
<li class="subitem"><a href="Renters.php">submenu</a></li>
<li class="subitem"><a href="Business.php">submenu</a></li>
</ul>
</li>
<li class="top_quote"><a href="Learning.php">test2</a> </li>
<li class="top_quote"><a href="index.php#WhySolid">test3</a></li>
</ul>
</div><!--navagation-->
</div><!--navbot-->
</div><!--navhold-->
</header><!--header-->
</div><!--fixed nav-->
<div class="main">
<!----------------------------------------------------------------/FOOTER---------------------------------------------------------------->
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = fixednav.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
fixednav.classList.add("sticky");
} else {
fixednav.classList.remove("sticky");
}
}
</script>
<script>
$(".learn").click(function() {
$learn = $(this);
//getting the next element
$content = $learn.closest(".wrap1").next().find(".content");
$test = $learn.closest(".test").next().find(".test");
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$learn.text(function() {
//change text based on condition
return $content.is(":visible") ? "Learn less!" : "Learn More!";
});
});
});
</script>
</div><!--main-->
</body>
</html>你也可以在这里测试.. https://jsfiddle.net/1t2fhdb9/24/
谢谢