CSS, 하위 메뉴에서 div를 이동할 수 있습니까?

그래서이 드롭 다운 메뉴가 있습니다. 누군가가 하위 메뉴가있는 메뉴 항목을 가리키면 txt div를 이동할 수 있는지 궁금합니다. 따라서 하위 메뉴가 textdiv 위에 표시되지 않습니다. 내 코드는 http://jsfiddle.net/6koazkhs/입니다. 그래서 내가 좋아하는 것은 nav div가 (색상별로) 늘어나는 방식이 아니라 누군가가 하위 메뉴를 가리킬 때 txt div가 떠 다니는 것입니다. 여기 내가 원하는 걸 설명하는 이미지 : enter image description here 그런 것이 가능합니까? 여기CSS, 하위 메뉴에서 div를 이동할 수 있습니까?

내 코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 
<style> 
body { 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 20px 50px 150px; 
    font-size: 13px; 
    text-align: center; 
    background: #E3CAA1; 
} 

ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
} 
ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
} 
ul li:hover { 
    background: #555; 
    color: #fff; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 
div.txt{background:#ddd; width:100%} 
div.nav{background:#ccc; width:100%; border-radius:10px;} 
</style> 

</head> 

<body> 
<div class="nav"><ul><li>Home</li> 
    <li>About</li> 
    <li> 
    Portfolio 
    <ul> 
     <li>Web Design</li> 
     <li>Web Development</li> 
     <li>Illustrations</li> 
    </ul> 
    </li> 
    <li>Blog</li> 
    <li>Contact</li> 
</ul></div> 
<div class="txt">Here my test</div> 
</body> 
</html>

출처

2015-01-15 RobbertT

가능하지 도움이 될 수 있다면 모르겠 음 나는 알고있다. JS 기반 솔루션을 사용 해본 적이 있습니까? – Terry

안녕하세요, 네 ..하지만 그건 내 txtdiv .. 토글 내가 피하려고 뭔가. – RobbertT

그러나 드롭 다운 메뉴 *는 귀하의 바이올린을 기반으로 한 토글 요소입니다. 토글 링을 포함하지 않는 다른 방법으로 바이너리 상태를 달성 할 수 있습니까? – Terry

당신이 여분의 사업부를 추가 할 수있는 옵션을 가지고 있지만, 당신이 경우에이 CSS 등으로

$(".Drop").hover(function(){ 
 
    $("#Space").slideToggle(); 
 
});

body { 
 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    padding: 20px 50px 150px; 
 
    font-size: 13px; 
 
    text-align: center; 
 
    background: #E3CAA1; 
 
} 
 

 
ul { 
 
    text-align: left; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 15px 4px 17px 0; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    font: bold 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #fff; 
 
    cursor: pointer; 
 
} 
 
ul li:hover { 
 
    background: #555; 
 
    color: #fff; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 
ul li ul li { 
 
    background: #555; 
 
    display: block; 
 
    color: #fff; 
 
} 
 
ul li ul li:hover { background: #666; } 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
div.txt{background:#ddd; width:100%} 
 
div.nav{background:#ccc; width:100%; border-radius:10px;} 
 

 
#Space{ 
 
    height:170px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="nav"><ul><li>Home</li> 
 
    <li>About</li> 
 
    <li class="Drop"> 
 
    Portfolio 
 
    <ul> 
 
     <li>Web Design</li> 
 
     <li>Web Development</li> 
 
     <li>Illustrations</li> 
 
    </ul> 
 
    </li> 
 
    <li>Blog</li> 
 
    <li>Contact</li> 
 
</ul></div> 
 
<div id="Space"></div> 
 
<div class="txt">Here my test</div>

출처

2015-01-15 09:12:06 Prachit

고마워요,하지만 꽤 이드처럼 .. 감사합니다. – RobbertT

CSS, 하위 메뉴에서 div를 이동할 수 있습니까?

답변

관련 문제