繼續頂子和保持DIV的內容從移動和大小

我對這個問題和答案跟進： Sub-menu expanding parent div instead of displaying on top 繼續頂子和保持DIV的內容從移動和大小

如果在上面的例子中，菜單下方的股利，做你如何保持1）div內容不在四處移動，2）div的大小不在移動，而是保持響應？

例如，我從上面的鏈接中分出了js小提琴，並創建了div id =「mytest」。當您將鼠標懸停在「關於我」鏈接上時，我希望菜單和「mytest」div完全獨立。這裏是我的叉：http://jsfiddle.net/nXqn8/

這裏是代碼：

<div id="menu"> 
     <ul> 
      <li><a id="" class="" href="">Home</a></li> 
      <li><a id="" class="" href="">About Me</a> 
       <ul class="sub-menu"> 
        <li><a href="">Biography</a></li> 
        <li><a href="">Photo Galery</a></li> 
        <li><a href="">Foot Print</a></li> 
       </ul> 
      </li> 
      <li><a id="" class="" href="">Expertise</a></li> 
      <li><a id="" class="" href="">Projects</a> 
       <ul class="sub-menu"> 
        <li><a href="">Geo 228 Portal</a></li> 
        <li><a href="">NEP Application</a></li> 
        <li><a href="">Geo Address Book</a></li> 
        <li><a href="">Assets Management</a></li> 
       </ul> 
      </li> 
      <li><a id="" class="" href="">Contact</a></li> 
     </ul> 
    </div> 
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>

CSS：

#menu { 
position: relative; 
font-size: 0.8em; 
margin: 0; 
padding: 0; 
background-color: #666666; 
border-top: 1px solid #999; 
border-bottom: 1px solid #999; 
overflow: visible; 
z-index: 2; 
height: 35px; 

} 


#menu ul { 
position: relative; 
margin: 0; 
padding: 0; 
list-style: none; 
z-index: 3; 
} 

#menu li { 
display: block; 
width: 120px; 
float: left; 
border-right: 1px solid #999; 
z-index: 4; 
} 

#menu a { 
color: #ffffff; 
font-weight: bold; 
display: block; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
margin: 0; 
padding: 10px 20px; 
} 

#menu a:hover { 
color: #000000; 
margin: 5px 10px; 
padding: 5px 10px; 
background-color: #C0C0C0; 
border-radius: 10px; 
} 

#menu ul.sub-menu { 
display: none; 
position: relative; 
} 

#menu ul.sub-menu li { 
width: 200px; 
background-color: #C0C0C0; 
border-width: 0 1px 1px 1px; 
border-style: solid; 
border-color: #666666; 
} 

#menu ul.sub-menu li a { 
color: #000; 
text-align: center; 
margin: 5px 10px; 
padding: 5px 10px; 
} 

#menu ul.sub-menu li a:hover { 
color: snow; 
background-color: #666666; 
} 

    #menu li:hover ul.sub-menu { 
display: block; 
z-index: 90; 
} 
#mytest { 
background-color: red; 
}

最後，我有一些像你在埃森哲的頂部看到點綴在主菜單後，COM 。

謝謝！

來源

2014-04-17 mountainclimber

#menu li { 
    position:relative; 
} 

#menu ul.sub-menu { 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 100%; 
} 

#mytest { 
    float:left; 
    background-color: red; 
    width:100%; 
    text-align: center; 
}

DEMO

來源

2014-04-17 05:59:34 4dgaurav

這是兩個最好的之一，因爲菜單似乎是充分響應。謝謝！！！ – mountainclimber

我的榮幸.. :) – 4dgaurav

定義您#menuliposition: relative和定義你的子菜單#menu ul.sub-menuposition: absolute;left: 0;top: 100%;

，因爲這CSS

#menu li { 
    position:relative; 
} 

#menu ul.sub-menu { 
display: none; 
    position: absolute; 
left: 0; 
top: 100%; 
}

Demo

來源

2014-04-17 05:15:48

繼續頂子和保持DIV的內容從移動和大小

回答

相關問題