Question

我有一个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;
}

Answer 1

你可以使用“相邻兄弟组合器”

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

这是一个jsfiddle：example

但是这样你就无法使用它。如果要使用它，则必须重新构建标记。例如，将nav元素放入div元素中。这是另一个jsfiddle：Another example

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

1 个答案: