html - 下拉子菜单 HTML 和 CSS(摇动)

Question

我需要创建一个带有子菜单的非常简单的响应式菜单。我目前遇到的问题是我的子菜单“抖动”，我不明白为什么。

谢谢!

这是我的HTML

<header>
    <a href="inicio.html" id="logo">
    </a>
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a href="#">Nosotros</a></li>

            <li><a href="#">Productos</a>
                <ul class="hidden">
                    <li><a href="#">Sub 1</a></li>
                </ul>
            </li>


            <li><a href="#">Soluciones</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</header>

这是我的 CSS:

header {
background-color: #102a42;
background-image: linear-gradient(0deg, #102a42 0%, #171c31 100%);
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: 100; 
}

#logo {
margin: 20px;
float: left;
width: 230px;
height: 46px;
background: url(../images/logo-header.png) no-repeat center;
display: block;
}

nav {
float: right;
padding: 10px 20px 0 0;
}

#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(../images/menu-icon.png) center;
}


ul{
list-style: none;
font-size: 1em;
}

li {
display: inline-block;
float: left;
padding: 10px;
}

li a {
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-decoration: none;
color: #fff;
font-size: 1em;
}

li a:hover {
color: #00BFA1;
}


li ul {
display: none;
}

li ul li {
display: block;
float: none;
}


li ul li a {
width: auto;
min-width: 200px;
padding: 0 20px;
}

ul li a:hover + .hidden, .hidden:hover {
display: block;
}

非常感谢任何帮助，我需要在今天之前解决这个问题! :) 我还不能将我的网站上传到任何地方，所以我没有办法向您展示发生了什么。

Answer 1

在您的最后一个 CSS 规则中，您可以将 anchor 标记上的悬停更改为 li，这样它就不会跳转。另一种方法是向 anchor 添加填充，这样您就可以将鼠标悬停在 anchor 上。希望这可以帮助。 Fiddle

header {
background-color: #102a42;
background-image: linear-gradient(0deg, #102a42 0%, #171c31 100%);
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: 100; 
}

#logo {
margin: 20px;
float: left;
width: 230px;
height: 46px;
background: url(../images/logo-header.png) no-repeat center;
display: block;
}

nav {
float: right;
padding: 10px 20px 0 0;
}

#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(../images/menu-icon.png) center;
}


ul{
list-style: none;
font-size: 1em;
}

li {
display: inline-block;
float: left;
padding: 10px;
}

li a {
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-decoration: none;
color: #fff;
font-size: 1em;
}

li a:hover {
color: #00BFA1;
}


li ul {
display: none;
}

li ul li {
display: block;
float: none;
}


li ul li a {
width: auto;
min-width: 200px;
padding: 0 20px;
}

ul li:hover a + .hidden, .hidden:hover {
display: block;
}

<header>
    <a href="inicio.html" id="logo">
    </a>
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a href="#">Nosotros</a></li>

            <li><a href="#">Productos</a>
                <ul class="hidden">
                    <li><a href="#">Sub 1</a></li>
                </ul>
            </li>


            <li><a href="#">Soluciones</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</header>