CSS导航菜单幻灯片徘徊时向右(CSS Navigation menu slides to righ

2019-10-18 09:12发布

我有一个导航菜单,我想有子页面的下拉菜单。 我创建它,一切都很好,除了页面顶部菜单滑动到右侧链接时,该下拉菜单可显示当我将鼠标悬停与子页面的页面链接。 它是什么,我在这里失踪? 我在这里先向您的帮助表示感谢。


这里是的jsfiddle:jsfiddle.net/AC8XK/

我有什么不一样的是100%,因为有很多缺失,但它表明正是我所提到的问题。


我设法菜单正常工作。 到最初的问题的解决方案是,作为迈克说,改变相对于 绝对下拉UL位置

作为下拉的定位,我通过使用填充顶部 ,而不是顶部上边距解决了这个问题。

感谢大家,试图帮助。

Answer 1:

你的jsfiddle was..well提供的代码...有点乱。 我只好把衣服脱了很多,并产生一些基本的格式设置为下拉。 我会评论的重要位,但它应该是或多或少复制和粘贴。 该代码是为菜单布局文本-没有视觉或位置的造型的东西。

关键概念:1 -设置你的LIS到width:auto和LI> UL到position: absolute;width:100% 这样的定位,并确保个人ul ul li s为在不同的行。 2 -你有display:nonedisplay:block正确的。 另外,您也可以使用现成的屏幕定位为同样的目的。 3-记得做ul ul {position:absolute;}允许相对于父子菜单的定位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 Navigation menu slides to right when hovering
标签: css menu hover