-1
私は親を得る方法、または<ul class="main-ul">を固定する方法を見つけようとしています。私はそれが私のポジショニングと関係しているか、少なくとも私は思っていますが、私はそれが何であるか、なぜそれがわからないのか分かりません。現在、各項目の下に子<ul>が展開されている場合は、親全体が<li>と続きます。ネストされたul移動親ulを子li要素の深さに合わせる
$(document).ready(function() {
$('.main-ul').children('li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
});.home-main-nav-menu {
border-style: double;
border-color: cyan;
}
.main-li-items {
display: inline-block;
text-align: center;
padding-left: 5px;
margin-right: 10px;
border-style: double;
border-color: purple;
}
.sub-li-items {
list-style-type: none;
text-align: left;
margin-left: -40.5px;
border-style: double;
border-color: yellow;
}
.main-li-items > ul {
display: none;
}
.main-ul {
border-style: double;
border-color: green;
margin-left: -3px
}
ul {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<nav class = "home-main-nav-menu">
<ul class="main-ul">
<li class="main-li-items"><a href="#/">Home</a></li>
<li class="main-li-items"><a href="#/">About Me</a>
<ul>
<li class="sub-li-items"><a href="#/">Education</a></li>
<li class="sub-li-items"><a href="#/">Lessons</a></li>
</ul>
</li>
<li class="main-li-items"><a href="#/">Blog</a></li>
<li class="main-li-items"><a href="#/">Contact</a>
<ul>
<li class="sub-li-items"><a href="#/">Email</a></li>
<li class="sub-li-items"><a href="#/">Phone</a></li>
</ul>
</li>
<li class="main-li-items"><a href="#/">Portfolio</a>
<ul>
<li class ="sub-li-items"><a href="#/">Recent</a></li>
<li class="sub-li-items"><a href="#/">All</a></li>
</ul>
</li>
<li class = "main-li-items"><a href="#/">Collaborate</a>
<ul>
<li class="sub-li-items"><a href="#/">Now</a></li>
<li class="sub-li-items"><a href="#/">Later</a></li>
</ul>
</li>
</ul>
</nav>
あなたが拡大する緑の境界に境界線を欠けているが、トップに滞在する残りのリンクのために示されていますか？ – abagshaw
はい、これはうまくいきます。私はちょうどメインのulのアイテムまたは親ulのアイテムが通常のドロップダウンのように上部に留まるようにしたいです –