html - 使用 CSS3 和 HTML5 向下滑动菜单栏

我有一个我一直在开发的 HTML5 和 CSS3 菜单栏，我试图让它在悬停在 div 上时可见。对我做错的任何帮助将不胜感激。

这是我的代码，提前谢谢你:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            Navigation
        </title>
        <link rel="stylesheet" type="text/css" href="Navigation.css"/>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Menu 1</a>
                    <ul>
                        <li><a href="#">SubMenu 1</a></li>
                        <li><a href="#">SubMenu 2</a></li>
                        <li><a href="#">SubMenu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 2</a>
                    <ul>
                        <li><a href="#">SubMenu 4</a></li>
                        <li><a href="#">SubMenu 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a></li>
            </ul>
        </nav>
        <div id="hideshow">
            <center>
                <p style="font-size: 25px">
                    .&nbsp.&nbsp.
                </p>
            </center>
        </div>
    </body>
</html>

CSS

nav ul ul 
{
    display: none;
}

nav
{
    display: none;
}

nav ul li:hover > ul 
{
    display: block;
}

nav ul 
{
    margin-right: 1em;
    display: inline-table;
    margin-left: 0;
    padding-left: 0;
    opacity: 0.6;
    margin: 0;
    width: 100%;
    background: #C6E2FF; 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
}

nav ul li 
{
    float: left;
    background-color: #ff5050;
    border-right: 20px solid #ff0000;
    border-left: 20px solid #ff0000;
}

nav ul li:hover 
{
    border-radius: 10px;
    background: #ffa000;
    border-right: 40px solid #ff0000;
    -webkit-transition: all 1s ease;
}

nav ul li:hover a
{
    color: #fff;
}

nav ul li a 
{
    display: block; padding: 25px 40px;
    color: #e0e0e0; text-decoration: none;
}

nav ul ul 
{
    border-radius: 0px;
    background: #C6E2FF; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}

nav ul ul li 
{
    float: none; 
    border-top: 3px solid #C6E2FF;
    border-bottom: 3px solid #C6E2FF;
    position: relative;     
}

nav ul ul li a 
{
    padding: 15px 40px;
    color: #fff;
}

nav ul ul li a:hover 
{
    background: #ff5050;
    border-left: 12px solid #ffa000;
    -webkit-transition: all 1s;
}

nav ul li:hover > ul ul li
{
    background: #ff5050;
    border-left: 12px solid #ffa000;
    -webkit-transition: all 1s;
}

nav ul ul li:hover
{
    background: #ff5050;
    border-left: 12px solid #ffa000;
    -webkit-transition: all 1s;
    background-color: #ff5050;
}

nav ul:hover
{
    opacity: 1;
    -webkit-transition: all 1s;
}

#hideshow
{
    border: 2px dashed #e0e0ee;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    width: 100%;
    background-color: #e0e0e0;
}

#hideshow:hover  nav  ul
{
    display: inline-table;
    border: 2px dashed #e0e0ee;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}

#hideshow  p
{
    color: #9C9C78;
}

最佳答案

你可以通过使用“相邻兄弟组合器”来做到这一点

#hideshow:hover + nav {
    display: block;
}

这是一个 jsfiddle:example

但是这样你就不能用了。如果你想使用它，你必须重组你的标记。例如，将 nav 元素放入 div 元素中。这是另一个 jsfiddle:Another example

关于html - 使用 CSS3 和 HTML5 向下滑动菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22563715/

html - 使用 CSS3 和 HTML5 向下滑动菜单栏

上一篇：css - 将水平菜单和页脚链接设置到右侧

下一篇：javascript - 使用 jQuery 将其他对象移动到位后淡出对象