Question

我一直在努力解决这个问题几天，虽然我会从互联网上寻求帮助。我想创建一个子菜单，当我将鼠标悬停在链接上时会出现该子菜单。它的这一部分适用于时尚，但当链接出现在网页上时，它们完全没有格式化。任何帮助或建议我都会非常感激。

以下是Fiddle

提前致谢。

HTML代码

<body>

        <nav>
        <ul><li><a href="index.html">home</a></li>      

        <li><a href="#">venue</a>
        <ul class="hidden"> <li><a href="venue.html">address</a></li>
        <li><a href="venue.html#background">venue background</a></li>
        <li><a href="venue.html#instructors">instructors</a></li></ul> </li>

        <li><a href="wakeboarding.html">wakeboarding</a>
        <ul class="hidden"> <li><a href="wakeboarding.html">background</a></li> 
        <li><a href="wakeboarding.html">future</a></li></ul> </li>

        <li><a href="events.html">up-coming events</a>
        <ul class="hidden"> <li><a href="events.html">professional</a></li> 
        <li><a href="events.html">amateur</a></li> </ul></li>

        <li><a href="prices.html">prices</a>
        <ul class="hidden"> <li><a href="prices.html">prices</a></li> 
        <li><a href="events.html">special offers</a></li></ul> </li>

        <li><a href="contact.html">contact us</a></li></ul>
        </nav>

        <img src = "logo.png"
         alt = "Logo" />

        <form>
            <input type="email" required placeholder="sign up for newsletter" /> <input type="submit" value="submit">
        </form>

    </body>
<br />

CSS代码

body nav > ul >  li {

list-style-type: none;
position: intial;
top: 110px;
//right: -200px;
display: inline;

}

body nav > ul .hidden   {


opacity: 1;
position: relative;

}

body nav > ul > li:hover  >.hidden  {

visibility: visible;
display:block;
position:absolute;
top:10x;

}



body nav ul li  {

display: inline;
padding: 80px;
font-family: Geneva,Tahoma,Verdana,sans-serif; 
font-size: 24px; 

}

Answer 1

看看它是否有帮助

https://jsfiddle.net/Edrees21/ae55p7u1/2/

<div class="nav">
    <ul>
        <li class="main-menu-item">
            <a class="link">Link 1</a>
            <ul class="sub-menu">
                <li>Sub menu 1</li>
                <li>Sub menu 2</li>
                <li>Sub menu 3</li>
            </ul>
        </li>
        <li class="main-menu-item">
            <a class="link">Link 2</a>
            <ul class="sub-menu">
                <li>Sub menu 1</li>
                <li>Sub menu 2</li>
            </ul>
        </li>
        <li class="main-menu-item">
            <a class="link">Link 3</a>
            <ul class="sub-menu">
                <li>Sub menu 1</li>
                <li>Sub menu 2</li>
            </ul>
        </li>
    </ul>
</div>

CSS ul { list-style：none; 保证金：0; 填充：0; }

li {
    padding: 5px;
}

.main-menu-item {
    position: relative;
    cursor: pointer;
}

.main-menu-item:hover > ul {
    display: block;
}

.sub-menu {
    display: none;
    position: absolute;
    left: 80px;
    top: 0;
}

尝试使用HTML5和CSS创建子菜单

1 个答案: