상위 항목의 오른쪽 가장자리를 기준으로 초과하는 하위 메뉴 영역을 열려면 어떻게해야합니까?

Question

몇 가지 하위 메뉴가있는 간단한 가로 메뉴를 만들고 있습니다.

하지만 하위 항목이 상위 항목의 너비를 존중하도록 노력하고 있습니다. 내가 무슨 말 여기

일부 이미지 :

여기

이야 내가 무엇을 얻을 :

Fiddle

를 체크 아웃 :

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    font-family: arial, helvetica, sans-serif; 
 
    font-size: 12px; 
 
} 
 
.menu { 
 
    list-style: none; 
 
    border: 1px solid #c0c0c0; 
 
    float: left; 
 
} 
 
.menu li { 
 
    position: relative; 
 
    float: left; 
 
    border-right: 1px solid #c0c0c0; 
 
} 
 
.menu li a { 
 
    color: #333; 
 
    text-decoration: none; 
 
    padding: 5px 10px; 
 
    display: block; 
 
} 
 
.menu li a:hover { 
 
    background: #333; 
 
    color: #fff; 
 
    -moz-box-shadow: 0 3px 10px 0 #CCC; 
 
    -webkit-box-shadow: 0 3px 10px 0 #ccc; 
 
    text-shadow: 0px 0px 5px #fff; 
 
} 
 
.menu li ul { 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 0; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 
.menu li:hover ul, 
 
.menu li.over ul { 
 
    display: block; 
 
} 
 
.menu li ul li { 
 
    border: 1px solid #c0c0c0; 
 
    display: block; 
 
    width: 150px; 
 
}

<nav> 
 

 
    <ul class="menu"> 
 

 
    <li><a href="#">Home</a> 
 
    </li> 
 

 
    <li><a href="#">About</a> 
 
    </li> 
 

 
    <li><a href="#">What we do?</a> 
 

 
     <ul> 
 

 
     <li><a href="#">What we do? 01</a> 
 
     </li> 
 
     <li><a href="#">What we do? 02</a> 
 
     </li> 
 
     <li><a href="#">What we do? 03</a> 
 
     </li> 
 
     </ul> 
 

 
    </li> 
 

 
    <li><a href="#">Links</a> 
 

 
     <ul> 
 

 
     <li><a href="#">Myotherwebsiteiscool</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    <li><a href="#">Contact</a> 
 

 
     <ul> 
 

 
     <li><a href="#">Form Contact</a> 
 
     </li> 
 
     <li><a href="#">Find us</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    </ul> 
 

 
</nav>

Answer 1

변경 내가 right: 0

.menu li ul { 
    position: absolute; 
    top: 25px; 
    right: 0; 
    background-color: #fff; 
    display: none; 
} 

에 변화 left: 0을했습니다하는 CSS 여기 - 노트를 체크 아웃 :

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    font-family: arial, helvetica, sans-serif; 
 
    font-size: 12px; 
 
} 
 
.menu { 
 
    list-style: none; 
 
    border: 1px solid #c0c0c0; 
 
    float: left; 
 
} 
 
.menu li { 
 
    position: relative; 
 
    float: left; 
 
    border-right: 1px solid #c0c0c0; 
 
} 
 
.menu li a { 
 
    color: #333; 
 
    text-decoration: none; 
 
    padding: 5px 10px; 
 
    display: block; 
 
} 
 
.menu li a:hover { 
 
    background: #333; 
 
    color: #fff; 
 
    -moz-box-shadow: 0 3px 10px 0 #CCC; 
 
    -webkit-box-shadow: 0 3px 10px 0 #ccc; 
 
    text-shadow: 0px 0px 5px #fff; 
 
} 
 
.menu li ul { 
 
    position: absolute; 
 
    top: 25px; 
 
    right: 0; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 
.menu li:hover ul, 
 
.menu li.over ul { 
 
    display: block; 
 
} 
 
.menu li ul li { 
 
    border: 1px solid #c0c0c0; 
 
    display: block; 
 
    width: 150px; 
 
}

<nav> 
 

 
    <ul class="menu"> 
 

 
    <li><a href="#">Home</a> 
 
    </li> 
 

 
    <li><a href="#">About</a> 
 
    </li> 
 

 
    <li><a href="#">What we do?</a> 
 

 
     <ul> 
 

 
     <li><a href="#">What we do? 01</a> 
 
     </li> 
 
     <li><a href="#">What we do? 02</a> 
 
     </li> 
 
     <li><a href="#">What we do? 03</a> 
 
     </li> 
 
     </ul> 
 

 
    </li> 
 

 
    <li><a href="#">Links</a> 
 

 
     <ul> 
 

 
     <li><a href="#">Myotherwebsiteiscool</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    <li><a href="#">Contact</a> 
 

 
     <ul> 
 

 
     <li><a href="#">Form Contact</a> 
 
     </li> 
 
     <li><a href="#">Find us</a> 
 
     </li> 
 

 
     </ul> 
 

 
    </li> 
 

 
    </ul> 
 

 
</nav>