Question

目前我正在处理我的垂直菜单，但我碰到了一堵墙。首先，菜单看起来我想要它的工作方式，但不幸的是它没有做我想要的任何类型的下拉菜单类型的东西。当我到达产品链接时，它就会从那里消失。我试图做一个悬停效果，但产品标签下方的链接却没有显示出来。

这是我现在正在使用的HTML。

<html>
<head>
    <title>Kenneth's new exercise</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="kenny.css">
</head>
<body>
<nav class="main-nav">
    <ul class="main-nav-ul">
        <li><a href="">Home</a></li>
        <li><a href="">Products</a></li>
            <ul>
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
            </ul>
        <li><a href="">Services</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>
</nav>
</body>
</html>

现在这里是CSS代码。

     html {
        background:url(wallpaper.jpg) no-repeat center center fixed;
        background-size:cover;
    }
    body {
        padding:0;
        margin:0;
    }
    a {
        text-decoration:none;
    }
    li {
        list-style:none;
    }
    .main-nav {
        width:250px;
        background:rgba(180,205,203,1.00);
    }
    .main-nav a {
        display:block;
        padding:10px 0px 10px 20px;
        color:#FFF;
        text-transform:uppercase;
        letter-spacing:.2em;
        border-bottom:1px dotted gray;
        text-align:left;
    }
    .main-nav a:hover {
        background:rgba(121,165,162,1.0);

    }
    .main-nav-ul ul {
        display:none;
    }
    .main-nav-ul ul:hover li {
        display:block;
        visibility:visible;
}

我必须为产品标签显示所有其他链接？

提前致谢。

Answer 1

你只需要在li上调用悬停并将ul包装在其中

.main-nav-ul li:hover ul {
        display:block;
        visibility:visible;

的CSS：

<li>
<a href="">Products</a>
            <ul>
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
            </ul>
            </li>

Answer 2

就像Modar Na说的那样，你只是将li和ul混为一谈。然而，CSS有点不对称，所以我在li和ul切换了jsfiddle，但也有一些代码，在我看来，它看起来好一点。所以你有你的下拉菜单，还有一些造型。代码在这里，但您只需点击jsfiddle链接即可 HTML：

<html>
<head>
    <title>Kenneth's new exercise</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="kenny.css">
</head>
<body>
<nav class="main-nav">
    <ul class="main-nav-ul">
        <li><a href="">Home</a></li>
        <li><a href="">Products</a>
            <ul>
                <li class="drop"><a href="">1</a></li>
                <li class="drop"><a href="">2</a></li>
                <li class="drop"><a href="">3</a></li>
                <li class="drop"><a href="">4</a></li>
            </ul>
        </li>
        <li><a href="">Services</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>
</nav>
</body>
</html>

CSS：

html {
        background:url(wallpaper.jpg) no-repeat center center fixed;
        background-size:cover;
    }
    body {
        padding:0;
        margin:0;
    }
    a {
        text-decoration:none;
    }
    li {
        list-style:none;
    }
    .main-nav {
        width:250px;
        padding: 0px 40px 0px 0px;
        background:rgba(180,205,203,1.00);
    }
    .main-nav a {
        display:block;
        padding:10px 0px 10px 20px;
        color:#FFF;
        text-transform:uppercase;
        letter-spacing:.2em;
        border-bottom:1px dotted gray;
        text-align:left;
    }
    .main-nav a:hover {
        background:rgba(121,165,162,1.0);

    }
    .main-nav-ul ul {
        display:none;
    }
    .main-nav li:hover ul {
        display:block;
        visibility:visible;
    }
    .drop {
        position:relative;
        left:-20px;  
    }
    }

我的垂直下拉菜单发生了什么变化？

2 个答案: