0
最初は本当にすみません。私は新しいユーザーです。ドロップダウンの内容が自動的に表示され、jqueryを使用してそれを表示します。
私は私に同じ問題を見つけることはできません。
誰でも私になぜnavbarドロップダウンボタンが突然表示されているのかを教えてもらえます。
私は人々が理解できないことを知っています。これは私の問題です。
$(document).ready(function(){
\t $('.menubar ul li').hover(function(){
\t $(this).find('.dropdown-content').slideToggle(400);
\t });
});ol, ul {
margin-top: 0;
margin-bottom: 10px;
display: inline-block;
list-style-type: none;
}
div {
\t
\t display:block;
}
center {
\t display: block;
text-align: -webkit-center;
}
.clearfix:after {
display:block;
clear:both;
\t
}
.menubar {
width:1100px;
\t height:50px;
\t text-align:center;
\t background-color:#454545;
\t margin-left:auto;
\t margin-right:auto;
list-style-type: none;
}
.menu {
width:100%;
\t text-decoration:none;
\t
}
.menu li {
\t float:center;
\t display:inline;
list-style:none;
font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight:normal;
font-style:normal;
}
.menu li.shoppingcart \t {
\t background:url("images/shoppingcart.png");
\t width:61px;
}
.menu a {
transition:all linear 0.2s;
color:white;
\t font-size:15px;
\t font-weight:normal;
\t font-style:normal;
}
.menu li:hover > a, .menu .current-item > a {
color:#aa79da;
\t height:100%;
\t cursor:pointer; \t
\t text-shadow: 0 0 10px purple;
\t background-color:#4c4b4b; \t
}
.menu > ul > li {
margin-left:auto;
\t margin-right:auto;
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
\t
}
.menu > ul > li > a {
padding: 30px 30px;
padding-top: 18px;
padding-bottom: 10px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
text-decoration: none;
\t margin-top: 0px;
}
--------------------------------------------------------------
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
\t display: inline-block;
list-style-type: none; \t
\t
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
/*background-color: red;*/
}
.activeNav {
\t background-color:#5e4279;
\t
}
.activeNav a{
\t color:white;
\t font-weight:bold;
\t
}
.activeNav li:hover > a, .activeNav .current-item > a {
\t /*background-color: #707070;*/
\t text-decoration:none;
\t color:white;
\t font-weight:bold;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
\t /*margin-top:6px;*/
\t /*width: 100%;*/
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
\t width:auto;
\t background-color:#4c4b4b;
\t z-index:100;
\t
\t
}
.dropdown1 {
\t margin-top:0px;
\t width:200px;
\t background-color:#4c4b4b;
\t float:left;
}
.dropdown2 {
\t width:200px;
\t background-color:#4c4b4b;
\t margin-left:200px;
\t float:center;
}
.dropdown3 {
\t width:200px;
\t background-color:#4c4b4b;
\t float:right; \t
\t margin-left:400px;
\t margin-top:-269px;
}
.dropdown-content a {
color: white; \t
padding: 12px 16px;
text-decoration: none;
display: block;
\t font-size:12px;
text-align: center;
\t text-decoration:none;
\t
}
.dropdown-content a:hover {
\t /*background-color: #707070;*/
\t text-decoration:none;
\t text-shadow: 0 0 10px purple;
\t color:#aa79da;
\t font-weight:bold;
}
.dropdown:hover .dropdown-content {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubar">
\t \t <nav class="menu">
\t \t \t <ul class="clearfix">
\t \t \t \t <li class="activeNav"><a class="home" href="home.php">Home</a></li>
\t \t \t \t <li class="dropdown"><a class="dropbtn" title="Discover KTD"><span class="menu-title">Discover KTD</span></a>
\t \t \t \t \t <div class="dropdown-content">
\t \t \t \t \t \t \t <div class="dropdown1">
\t \t \t \t \t \t \t \t <h4 style="margin-top:0px; padding-top:35px; color:white; text-shadow: 0px 1px 0px rgba(0,0,0,0.4); font-family:Helvetica Neue , Helvetica, Helvetica, Arial, sans-serif; text-decoration: underline;">WHY KTD?</h4>
\t \t \t \t \t \t \t \t <a href="#">Message from CEO</a>
\t \t \t \t \t \t \t \t <a href="#">Overview of KTD</a>
\t \t \t \t \t \t \t \t <a href="#">Vision & Mission</a>
\t \t \t \t \t \t \t \t <a href="#">Philosophy & Core Values</a>
\t \t \t \t \t \t \t \t <a href="#">Testimonials</a>
\t \t \t \t \t \t \t \t <a href="#">KTD Partners</a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="dropdown2">
\t \t \t \t \t \t \t \t <h4 style="margin-top:0px; padding-top:35px; color:white; text-shadow: 0px 1px 0px rgba(0,0,0,0.4); font-family:Helvetica Neue , Helvetica, Helvetica, Arial, sans-serif; text-decoration: underline;">KTD Leadership</h4>
\t \t \t \t \t \t \t \t <a href="#">Board of Directors</a>
\t \t \t \t \t \t \t \t <a href="#">Key Management Team</a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </li>
\t \t \t </ul>
\t \t </nav>
\t </div>
それは仕事をdidntの、そしてそれがオープンドロップダウンとに常時自体近くのようなものです。私を助けてくれてありがとう。 –