問題描述

我關于 SO 的第一個問題，希望它是從頭開始的，對于精通 css 藝術的人來說應該是一個簡單的解決方案......

my first question on SO, hope it's up to scratch, should be a simple solve for somebody well versed in the art of css...

我遇到的問題是我的 css 驅動導航的下拉部分導致其下方的內容向右移動.我發現發布了類似的問題，但我已經嘗試了所有提供的解決方案，但似乎沒有任何效果.....

The problem im having is that the dropdown sections of my css-driven navigation are causing the content below it to shift to the right. I have found similar-ish questions posted but I have tried all provided solutions and nothing seems to get it working.....

我設法得到的最接近的方法是將 position:absolute; 添加到 #nav li:hover ul 標記，這確實阻止了內容四處移動，但產生了一個新問題，下拉子菜單僅在鼠標位于頂級菜單項上時可見，并且嘗試將鼠標向下移動子菜單會導致它消失......我發現的另一個問題同樣令人沮喪解決...

The closest I have managed to get is to add position:absolute; to the #nav li:hover ul tag, and this does stop the content from moving around, but creates a new problem, the dropdown submenu is only visible when the mouse is over the top level menu item, and trying to move the mouse down the submenu causes it to disappear... another problem that I am finding equally as frustrating to solve...

導航的 html 是標準的嵌套列表:

the html for the navigation is standard nested lists:

<div id="navigation_panel" class="orange_grad">
    <!-- navigation-->
      <ul id="nav">
            <li><a href="#">about us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">staff</a></li>
                            <li class="orange_grad"><a href="2">venue</a></li>
                            <li class="orange_grad"><a href="2">history</a></li>
                            <li class="orange_grad"><a href="2">community theatre</a></li>
                            <li class="orange_grad"><a href="2">rep theatre</a></li>
                            <li class="orange_grad"><a href="2">theatre school</a></li>
                            <li class="orange_grad"><a href="2">official partners</a></li>
                    </ul>
            </li>
            <li><a href="#">join us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">friends membership</a></li>
                            <li class="orange_grad"><a href="2">wine club</a></li>
                    </ul>
            </li>
            <li><a href="#">hire</a>
                    <ul>
                            <li class="orange_grad"><a href="1">business</a></li>
                            <li class="orange_grad"><a href="2">rehersal space</a></li>
                            <li class="orange_grad"><a href="2">community groups</a></li>
                            <li class="orange_grad"><a href="2">theatre productions</a></li>
                            <li class="orange_grad"><a href="2">memorable occasions</a></li>
                    </ul>
            </li>
            <li><a href="#">contact</a>
                    <ul>
                            <li class="orange_grad"><a href="1">list of contacts</a></li>
                            <li class="orange_grad"><a href="2">contact us now</a></li>
                    </ul>
            </li>
            <li class=" last"><a href="#">support</a>
                    <ul>
                            <li class="orange_grad last"><a href="1">donations + requests</a></li>
                            <li class="orange_grad last"><a href="2">past sponsors</a></li>
                            <li class="orange_grad last"><a href="2">thanks</a></li>
                            <li class="orange_grad last"><a href="2">volunteers</a></li>
                            <li class="orange_grad last"><a href="2">set up a community event</a></li>
                    </ul>
            </li>
    </ul>

以及附帶的css如下:

and the accompanying css is as follows:

#navigation_panel {border-radius: 18px 18px 0 0/ 18px 18px 0 0; width: 900px; height:50px;}

#nav { margin:0; padding: 0; list-style:none;}
#nav a{ color:black; font-size: 20px; text-decoration:none; min-height:50px; width:95px;}
#nav li {text-align:center; float:left; padding:14px 8px ; cursor:pointer; width:95px;}
#nav li.last{width:99px;}

#nav li ul {margin-top:14px; margin-left:-8px; padding:0; display: none; list-style:none;}
#nav li ul li{ border:1px solid black; width:95px; padding:6px 8px;}
#nav li ul li a{/*font-family:arial;*/ font-size:14px;}

#nav li:hover{ text-decoration:underline; }
#nav li:hover ul{display: block;}
#nav li:hover ul li {clear: left;}

我試圖通過正常途徑(在 google、SO 等上搜索)以及嘗試各種定位配置來尋找解決方案，但我似乎無法解決這個問題......感謝您提前提供的任何幫助，這個問題整天讓我發瘋！

I have tried to find solutions through the normal route (search on google, SO etc) aswell as playing around with various positioning configurations but I just can't seem to solve this... Thanks for any help in advance, this problem has been driving me mad all day!

推薦答案

更新

終于有機會重新審視這個了.您只需將以下內容添加到 #nav li ul:

Finally got a chance to take a fresh look at this. All you need is to add the following to #nav li ul:

position: absolute;
z-index: 100;

在 IE8/9、FF 和 Chrome 中工作，盡管子菜單的位置在 IE7 中是關閉的，無論我是否更改.為了解決這個問題，我推薦通過您喜歡的任何方法使用 IE7 特定的 CSS.

Works in IE8/9, FF and Chrome, though the positioning of the sub menu is off in IE7, with or without my change. To fix that I recommend IE7 specific CSS through whatever method you prefer.

這篇關于CSS下拉導航導致html內容移動的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！