Navbar hover did not show
I'm building simple web template from scratch. I use old style jquery to make a hover on navbar to show list <li> , but it is working only on About us column and isn't working on Product column.
What is wrong? How should I do it?
HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Template</title>
<meta name="viewport" content="width=device-width" />
<script src="<?php echo base_url();?>js/jquery-3.0.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
<script>
$(document).ready(function(){
$("#nav ol li").hover(function(){
$("ol",this).show(); //when onmouseover //ol ใน nav ol li อีกชั้นนึง
},
function(){ //when mouseout
$("ol",this).hide();
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="toptext">
<span style="margin-left: 85%"><?php echo anchor("login","เข้าสู่ระบบ");?></span>
<span style="float:right;"><?php echo anchor("register/index","สมัครสมาชิก");?></span>
</div>
<div id="header">
<h1><p></p></h1>
</div>
<div id="nav">
<ol>
<li><a href="<?php echo base_url();?>index.php/home">Home</a></li>
<li><a href="#">About us</a>
<ol>
<li><a href="#">ประวัติ</a></li>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxxxx</a></li>
</ol>
<li><a href="#">Product</a></li>
<ol>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxxxx</a></li>
</ol>
<li><a href="#">Contact us</a></li>
</ol>
</div>
<div id="content">
<div id="left-side">
<p1>Homepage<p1>
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open('search');?>
<h3 style="text-align:center;"> ค้นหาสินค้า </h3>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
CSS
html,body{margin:0px;padding:0px;font-size:1vw;}
body{background:#cceeff;font-family:"verdana"; }
#wrapper{margin:auto;padding:0px;width:75%;}
.toptext{margin-top:1vh;margin-bottom: 1vh;}
.toptext span a{padding:3px;color:#000;text-decoration:none;}
.toptext span a:hover{background:#0052cc;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
color:white;}
#header{margin:0px;padding:0px;width:100%;height:18vh;float:left;
background: #99d6ff;
background-image: url("http://cdn.tigthai.com/uploads/201511/24/09396970014483375934182_One-Piece-Thousand-Strom-main.jpg"); /* fallback */
background-image: url("http://cdn.tigthai.com/uploads/201511/24/09396970014483375934182_One-Piece-Thousand-Strom-main.jpg"), linear-gradient(#99d6ff, #006bb3); /* W3C */
background-blend-mode: multiply;
}
#header h1{margin:0px;padding:0px;/*border-bottom:1px solid #eee;*/font-size:20px;padding-bottom:10px;}
#nav{margin:0px;padding:0px;width:100%;float:left;
background: #80ffe5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol{list-style:none;margin:0px;padding:0px;}
#nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
#nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}
#nav ol a:hover{background:#f2f2f2;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
}
#nav ol ol{position:absolute;top:35px;left:0px;display:none;
background: #80ffe5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol ol li{border-bottom:1px;}
#content{float:left;margin-top:2vh;padding:0px;width:100%;display:flex;min-height:70vh;word-break: break-all;}
#right-side{float:left;margin-left:2vh;width:30%;border: solid 1px grey;background:white;}
#right-side ol{list-style:none;}
#left-side{float:left;width:70%;border: solid 1px grey;background:white;}
#footer{float:left;margin-top:2vh;padding:2vh;width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: #99d6ff; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#99d6ff, #006bb3); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99d6ff, #006bb3); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99d6ff, #006bb3); /* For Firefox 3.6 to 15 */
background: linear-gradient(#99d6ff,#006bb3); /* Standard syntax */
}
.searchbox
{
background: #9999ff;
margin: 10px;
margin-top:20px;
padding: 5px;
border-radius: 5px;
}
.loginbox
{
background: #9999ff;
margin: 10px;
margin-top:20px;
padding: 5px;
border-radius: 5px;
width: 40%;
}
.loginbox ul li
{
list-style:none;
margin-left:-10px;
}
.search-bar
{
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
width:230;
position:relative;
}
.search-bar .searchbutton
{
position:absolute;
top:23%;
right:5px;
}
.sfield
{
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
Fixed your </li> tags in the code below and also replaced $("ol",this) with $(this).find("ol") . Seems to work: http://codepen.io/8odoros/pen/wzALyq
<li><a href="#">About us</a>
<ol>
<li><a href="#">ประวัติ</a></li>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxxxx</a></li>
</ol>
</li>
<li><a href="#">Product</a>
<ol>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxxxx</a></li>
</ol>
</li>
你可以简单地使用这个css ，为什么使用jquery
#nav ol li ol {
display:none;
}
#nav ol li:hover > ol {
display:block;
} Hello Check the Below Fiddle complete <li> tag end
menuFiddle
<li><a href="#">Product</a>
<ol>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxxx</a></li>
li><a href="#">xxxxxx</a></li>
</ol></li>
上一篇: 使用客户端请求
下一篇: Navbar悬停没有显示