CSS - 메뉴 항목이 겹침

Question

두 개의 메뉴 항목이있는 메뉴가 있으며 사용자가 각 항목을 클릭하면 하위 메뉴가 표시됩니다.

첫 번째 항목 아래 두 지점이 같은 지점에 표시됩니다. 나는 잠시 동안 조정했지만 문제를 해결할 수있는 방법을 찾을 수는 없습니다.

또한 하나의 메뉴 항목을 클릭하면 다른 항목의 하위 메뉴가 사라지는 지 확인해야합니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

$(document).ready(function(){ 
 
    $('.menu-item').on('click', function() { 
 
    $(this).children(".dropdown-content").toggle(); 
 
    }); 
 
});

#nav { 
 
    width: 100%; 
 
    height: 3em; 
 
    color: #fff; 
 
    line-height: 3em; 
 
} 
 

 
#nav .nav-wrapper { 
 
    height: 100%; 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
.right {float: right !important;} 
 

 
#nav-mobile { 
 
    list-style-type: none; 
 
    margin-top: 0; 
 
} 
 

 
#nav-mobile li { 
 
    display: inline; 
 
    margin: 0 2.5em 1.5em 1.5em; 
 
    font-family: Roboto, Helvetica, Arial, sans-serif; 
 
} 
 

 
#nav-mobile li a { 
 
    text-decoration: none; 
 
    /*position: relative;*/ 
 
} 
 

 
#nav-mobile li img { 
 
    position: relative; 
 
    top: .4em; 
 
} 
 

 
#nav-mobile li .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    color: #188CCC; 
 
    background-color: white; 
 
    z-index: 1; 
 
    box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65); 
 
    min-width: 120px; 
 
} 
 

 
#nav-mobile li .dropdown-content li { 
 
    display: block; 
 
    margin:0; 
 
    width: 100%; 
 
} 
 

 
#nav-mobile li .dropdown-content li a { 
 
    display: block; 
 
    margin:0; 
 
    padding: 0.25em 1.75em 0.25em 1.2em; 
 
} 
 

 
#nav-mobile li .dropdown-content li:hover { 
 
    background-color: #E0E0E0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="nav-mobile"> 
 
    <li class="menu-item"> 
 
    <img src="images/img1.png"> 
 
    <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a> 
 
    <ul id="linksdrop" class="dropdown-content"> 
 
     <li><a href="#">Link1</a></li> 
 
     <li><a href="#">Link2</a></li> 
 
     <li><a href="#">Link3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <img src="images/img2.png"> 
 
    <a class="hide-on-med-and-down white-text" href='#'>   <span>User</span></a> 
 
    <ul id="userdrop" class="dropdown-content"> 
 
     <li><a href="profile.html">Profile</a></li> 
 
     <li><a href="logout.html">Log Off</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

는 #nav-mobile lidisplay: inline-block에 설정하고 그것의 폭을 제공한다. 이 예에서는 min-width을 5em으로 설정했지만 디자인에는 의미가 있습니다.

다른 옵션을 닫으려면 몇 가지 옵션이 있지만 그냥 $(this).siblings().children(".dropdown-content").hide();을 수행하는 것으로 충분할 수 있습니다.

$(document).ready(function(){ 
 
    $('.menu-item').on('click', function() { 
 
    $(this).children(".dropdown-content").toggle(); 
 
    $(this).siblings().children(".dropdown-content").hide(); 
 
    }); 
 
});

#nav { 
 
    width: 100%; 
 
    height: 3em; 
 
    color: #fff; 
 
    line-height: 3em; 
 
} 
 

 
#nav .nav-wrapper { 
 
    height: 100%; 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
.right {float: right !important;} 
 

 
#nav-mobile { 
 
    list-style-type: none; 
 
    margin-top: 0; 
 
} 
 

 
#nav-mobile li { 
 
    display: inline-block; 
 
    margin: 0 2.5em 1.5em 1.5em; 
 
    font-family: Roboto, Helvetica, Arial, sans-serif; 
 
    min-width: 5em; 
 
} 
 

 
#nav-mobile li a { 
 
    text-decoration: none; 
 
    /*position: relative;*/ 
 
} 
 

 
#nav-mobile li img { 
 
    position: relative; 
 
    top: .4em; 
 
} 
 

 
#nav-mobile li .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    color: #188CCC; 
 
    background-color: white; 
 
    z-index: 1; 
 
    box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65); 
 
    min-width: 120px; 
 
} 
 

 
#nav-mobile li .dropdown-content li { 
 
    display: block; 
 
    margin:0; 
 
    width: 100%; 
 
} 
 

 
#nav-mobile li .dropdown-content li a { 
 
    display: block; 
 
    margin:0; 
 
    padding: 0.25em 1.75em 0.25em 1.2em; 
 
} 
 

 
#nav-mobile li .dropdown-content li:hover { 
 
    background-color: #E0E0E0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="nav-mobile"> 
 
    <li class="menu-item"> 
 
    <img src="images/img1.png"> 
 
    <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a> 
 
    <ul id="linksdrop" class="dropdown-content"> 
 
     <li><a href="#">Link1</a></li> 
 
     <li><a href="#">Link2</a></li> 
 
     <li><a href="#">Link3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <img src="images/img2.png"> 
 
    <a class="hide-on-med-and-down white-text" href='#'>   <span>User</span></a> 
 
    <ul id="userdrop" class="dropdown-content"> 
 
     <li><a href="profile.html">Profile</a></li> 
 
     <li><a href="logout.html">Log Off</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

는 드롭 다운을 #nav-mobile li 및 left: -50px 또는 원하는 값으로 position: relative을 추가합니다.

$(document).ready(function() { 
 

 
    $('.menu-item').on('click', function() { 
 
    $(".dropdown-content").hide(); 
 
    $(this).children(".dropdown-content").toggle(); 
 
    }); 
 
});

#nav { 
 
    width: 100%; 
 
    height: 3em; 
 
    color: #fff; 
 
    line-height: 3em; 
 
} 
 

 
#nav .nav-wrapper { 
 
    height: 100%; 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
.right { 
 
    float: right!important; 
 
} 
 

 
#nav-mobile { 
 
    list-style-type: none; 
 
    margin-top: 0; 
 
} 
 

 
#nav-mobile li { 
 
    display: inline; 
 
    margin: 0 2.5em 1.5em 1.5em; 
 
    font-family: Roboto, Helvetica, Arial, sans-serif; 
 
    position: relative; 
 
} 
 

 
#nav-mobile li a { 
 
    text-decoration: none; 
 
    /*position: relative;*/ 
 
} 
 

 
#nav-mobile li img { 
 
    position: relative; 
 
    top: .4em; 
 
} 
 

 
#nav-mobile li .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    color: #188CCC; 
 
    background-color: white; 
 
    z-index: 1; 
 
    box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65); 
 
    min-width: 120px; 
 
    left: -50px; 
 
} 
 

 
#nav-mobile li .dropdown-content li { 
 
    display: block; 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 

 
#nav-mobile li .dropdown-content li a { 
 
    display: block; 
 
    margin: 0; 
 
    padding: 0.25em 1.75em 0.25em 1.2em; 
 
} 
 

 
#nav-mobile li .dropdown-content li:hover { 
 
    background-color: #E0E0E0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav-mobile"> 
 
    <li class="menu-item"> 
 
    <img src="images/img1.png" /> 
 
    <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a> 
 
    <ul id="linksdrop" class="dropdown-content"> 
 
     <li><a href="#">Link1</a></li> 
 
     <li><a href="#">Link2</a></li> 
 
     <li><a href="#">Link3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <img src="images/img2.png" /> 
 
    <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a> 
 
    <ul id="userdrop" class="dropdown-content"> 
 
     <li><a href="profile.html">Profile</a></li> 
 
     <li><a href="logout.html">Log Off</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

측위 용