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

Trying to create sub menu using HTML5 and CSS

本文关键字：CSS 创建 菜单 HTML5      更新时间：2023-09-26

我已经为此挣扎了几天，尽管我会从互联网上寻求帮助。我想创建一个子菜单，当我悬停在链接上时会出现。这部分在某种程度上起作用，但当链接出现在网页上时，它们是完全未格式化的。如有任何帮助或建议，我将不胜感激。

这是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; 
}

看看这是否有助于

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>

CSSul{列表样式：无；边距：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;
}
相关文章：