悬停时，CSS导航菜单向右滑动 [英] CSS Navigation menu slides to right when hovering
问题描述
我有一个导航菜单，我希望有一个子页面的下拉菜单。我创建了它，一切都正常，只不过当顶部菜单中的页面链接到右侧时，当下拉菜单显示时，我将页面链接悬停在子页面上。
我在这里失踪的是什么？
感谢您的帮助。
以下是jsfiddle：
jsfiddle.net/ AC8XK /
我所拥有的并不是100％，因为缺少很多东西，但它显示了我提到的问题。
我设法让菜单正常工作。正如迈克所说，解决最初问题的方法是将 ul位置从相对更改为绝对。
关于下拉菜单的定位，我通过使用 padding-top 而不是 top 或者
$ b
感谢所有试图提供帮助的人。 b $ b
你在jsfiddle中提供的代码是......好吧......有点乱。我不得不削减很多，并为下拉菜单生成一些基本格式。我会评论重要的一点，但它应该或多或少地复制和放大。糊。代码完全菜单的布局文本 - 没有视觉或定位样式。
关键概念：1 - 将您的LI设置为 width：auto ，li> ul至 position：absolute; width：100％。这允许定位并确保单独的 ul ul li s在单独的行上。
2-您有显示：none 和 display：block 正确。或者，您也可以使用屏幕外定位来达到同样的目的。
3-记住要做 ul ul {position：absolute;} 来允许子菜单相对于父元素 li $ b
HTML：
< div class = greenbar >
< nav>
< ul id =menu-navigation-menuclass =navigation>
< ul class =sub-menu>
< li id =menu-item-116class =menu-item>< a href =＃>使用条款< / a>< / li>
< / ul>
< / li>
< li id =menu-item-106class =menu-item>< a href =＃>服务< / a>
< ul class =sub-menu>
< li id =menu-item-120class =menu-item>< a href =＃>另一个连结再次< / a>< / li>
< / ul>
< / li>
< li id =menu-item-105class =menu-item>< a href =＃>客户< / a>< / li>
< li id =menu-item-104class =menu-item>< a href =＃>资源< / a>< / li>
< / ul>
< / nav>
< / div>
CSS：
nav ul {
list-style-type：none;
职位：亲属;
display：inline-table;
}
nav ul li {float：left;}
nav ul li a {display：block; text-decoration：none;}
nav ul ul {
display：none;
位置：绝对;
width：auto;
}
nav ul li：hover> ul {display：block;}
nav ul ul li {width：100％;}
I have a navigation menu and I wanted to have a dropdown menu for subpages. I created it and everything is ok except that the pages links in the top menu slide over to the right when the dropdown shows when I hover the page link with subpages. What is it that I am missing here? Thanks for the help in advance.
Here is the jsfiddle: jsfiddle.net/AC8XK/
What I have is not 100% like that, since there is a lot missing, but it shows exactly the problem I mentioned.
I managed to get the menu working properly. The solution to the initial problem was, as mike said, changing the dropdown ul position from relative to absolute.
As for the positioning of the dropdown, I solved the problem by using padding-top instead of top or margin-top.
Thanks to everyone that tried to help.
The code you supplied in jsfiddle was..well...a bit of a mess. I had to strip a lot of it down and generate some base formatting for the dropdown. I will comment the important bits, but it should be more or less copy & paste. The code is solely the layout text for the menu - no visual or positional styling stuff.
Key Concepts: 1 - Set your LIs to width:auto and the li>ul to position: absolute;width:100%. This allows positioning and makes sure the individual ul ul lis are on separate lines.
2- You had the display:none and display:block correct. Alternatively, you can use off-the-screen positioning for the same purpose.
3- Remember to do ul ul {position:absolute;} to allow positioning of the submenus relative to the parent li!
HTML:
<div class="greenbar">
<nav>
<ul id="menu-navigation-menu" class="navigation">
<li id="menu-item-107" class="menu-item"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-116" class="menu-item"><a href="#">Terms of Use</a></li>
<li id="menu-item-119" class="menu-item"><a href="#">Just another link</a></li>
</ul>
</li>
<li id="menu-item-106" class="menu-item"><a href="#">Services</a>
<ul class="sub-menu">
<li id="menu-item-120" class="menu-item"><a href="#">Another link again</a></li>
</ul>
</li>
<li id="menu-item-105" class="menu-item"><a href="#">Clients</a></li>
<li id="menu-item-104" class="menu-item"><a href="#">Resources</a></li>
</ul>
</nav>
</div>
CSS:
nav ul {
list-style-type: none;
position: relative;
display: inline-table;
}
nav ul li {float: left;}
nav ul li a { display: block; text-decoration: none;}
nav ul ul {
display: none;
position: absolute;
width: auto;
}
nav ul li:hover > ul { display: block;}
nav ul ul li { width: 100%;}
这篇关于悬停时，CSS导航菜单向右滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
