首页 \ 问答 \ CSS下拉导航导致html内容移动(CSS dropdown nav causing html content to move)

CSS下拉导航导致html内容移动(CSS dropdown nav causing html content to move)

 我的第一个问题是，希望它可以抓到，应该是对精通CSS艺术的人的简单解决方案...  
 我所遇到的问题是，我的CSS驱动导航的下拉部分导致它下面的内容向右移动。 我发现类似的问题，但我已经尝试了所有提供的解决方案，似乎没有任何工作.....  
 我设法得到的最接近的position:absolute; 到#nav li:hover ul标记，这确实会阻止内容移动，但会产生一个新问题，只有当鼠标位于顶层菜单项上并尝试向下移动鼠标时，才会显示下拉菜单子菜单子菜单导致它消失...我发现另一个同样令人沮丧的问题解决...  
 导航的html是标准的嵌套列表：  
<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如下：  
#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;}
 
 我试图通过正常的路线（搜索谷歌，SO等）以及各种定位配置，但我似乎无法解决这个问题寻找解决方案...感谢您提前的任何帮助，这个问题已整天让我疯狂！ 

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... 
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..... 
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... 
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>
 
 
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;}
 
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!

原文：https://stackoverflow.com/questions/13212361

更新时间：2024-03-22 16:03

最满意答案

 像这样更新你的方法  
public function update_booking_cart() { 
.... // your code 

// if there is some data to be sent add data in argument else leave 
// it blank or dontpass it
   $this ->load->view('shop/cart', $data); // this will return the view as response data
}
 
 在ajax调用中进行以下更改  
$("#updatecart").click(function() { 
    return $.ajax({
        type: "POST",
        url:  "your url like modules/bookings/update_booking_cart",
        data: { id: this.id },
        success: function(response) {
            $("#container").html(data); 
            // load the view data/html in your container
        },
        error: function(error) {
            alert("Error");
        }
    });
});

Update your method like this 
public function update_booking_cart() { 
.... // your code 

// if there is some data to be sent add data in argument else leave 
// it blank or dontpass it
   $this ->load->view('shop/cart', $data); // this will return the view as response data
}
 
In ajax call make the following changes  
$("#updatecart").click(function() { 
    return $.ajax({
        type: "POST",
        url:  "your url like modules/bookings/update_booking_cart",
        data: { id: this.id },
        success: function(response) {
            $("#container").html(data); 
            // load the view data/html in your container
        },
        error: function(error) {
            alert("Error");
        }
    });
});

CSS下拉导航导致html内容移动(CSS dropdown nav causing html content to move)

最满意答案

相关问答

通过本地客户端程序获取服务器mysql数据库信息[2023-04-27]

Codeigniter无法找到视图文件(Codeigniter can not find the view file)[2019-11-14]

通过codeigniter中的ajax从控制器获取数组的值(getting the value of a array from controller to view with ajax in codeigniter)[2024-01-15]

从tpl文件发送到没有ajax的codeigniter中的控制器(post from tpl file to the controller in codeigniter without ajax)[2022-10-01]

使用ajax和不使用ajax的Codeigniter-控制器视图(Codeigniter- controller views using ajax and without)[2024-04-14]

在Codeigniter中打印来自控制器的视图文件以用于Ajax目的(Print View file from controller for Ajax purpose in Codeigniter)[2022-10-26]

如何在codeigniter中使用ajax？(How to use ajax in codeigniter?)[2021-08-01]

如何在codeigniter中将数据从控制器传递到jquery（Ajax）(how to pass data from controller to jquery (Ajax) in codeigniter)[2023-09-04]

如何通过ajax将隐藏字段值传递给codeigniter控制器(How to pass hidden field value via ajax to codeigniter controller)[2023-08-15]

CodeIgniter，Ajax调用没有进入Controller(CodeIgniter, Ajax call does not get into Controller)[2023-09-17]

相关文章

最新问答