我正在尝试弄清楚如何在使用手机即时显示子菜单时使其在顶部菜单下垂直显示，该移动电话将在顶部菜单按钮上提供点击结果以将子菜单展开到test2 LI下方。
我确信它的显示或与LI或UL的简单关联，但是我很难弄清楚它的存在，并且很难在此网站上找到有效的示例，这是一个很好的工作方法，只是将框架缩小到767px以下 仅使用.btmenu和li https://jsfiddle.net/1t2fhdb9/20/
@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>
答案 0 :(得分：0)
您的意思是打开悬停的topmenu li上的子菜单，并在topmenu li和test2 li之间显示它？如果是，则只需从子菜单类样式中删除位置：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>
您也可以在这里进行测试。ng-click-outside
谢谢