Html 如何提供菜单子菜单选项

您好，我有三个按钮，这三个按钮在第二个一视图属性

按钮当用户悬停在它上面时，我想通过悬停三个按钮来添加三个选项

选项应该在鼠标离开时出现，这样它就应该隐藏起来

在这里，我用UL和LI创建了这三个按钮，但现在每当我

要创建悬停代码，所以也需要UL和LI，所以这些代码是

制造相互碰撞。下面是我的代码如何添加悬停代码到我的CSS中

不会创建任何冲突，也不会通过按钮实现“我的视图属性”的子菜单

CSS code

#header ul {
    float: left;
    margin: 0;
    padding: 70px 0 0 0;
    overflow: hidden;   
    width: 605px;
}
#header ul li {
    list-style-type: none;
    float: left;    
    margin: 0;
    padding: 0;
    width: 121px;
}
#header ul li a,
#header ul li a span,
#header ul li a:hover,
#header ul li a:hover span,
#header ul li.selected a,
#header ul li.selected a span {
    background: url(images/menu.jpg);   
}
#header ul li a { 
    background-position: 10px 0; 
    color: #2a4f5e;
    display: block;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    margin: 0;
    padding: 0 0 0 10px;
    text-align: center; 
    text-decoration: none;
    text-transform: uppercase;
} 
#header ul li a span{ 
    background-position: -70px 0; 
    display: block; 
    margin: 0;
    padding: 0 10px 0 0;
} 
#header ul li a:hover {
    background-position: -186px -37px;
    color: #FFFFFF;
} 
#header ul li a:hover span { 
    background-position: -70px -37px; 
} 
#header ul li.selected a{ 
    background-position: 10px 36px; 
    color: #fff;
} 
#header ul li.selected a span{ 
    background-position: -70px -74px; 
} 

只需修改这个类

#header ul {
float: left;
margin: 0;
padding: 10px 0 0 0;
overflow: hidden;   

}

您需要将子菜单的位置设置为绝对，以防止您所指的碰撞。将其添加到样式表中：

ul li:hover ul{
        position: absolute;
}

---

首先删除标题ul溢出：隐藏，您不需要这个。 如果你确实需要一个容器，那么把你的导航包在另一个div中

在这里添加相对位置：

#header ul li {
    list-style-type: none;
    float: left;    
    margin: 0;
    padding: 0;
    width: 121px;
    position:relative;

}

然后在子菜单css代码中添加以下内容：

ul{
    padding: 0;
    list-style: none;
    position:absolute;
    top:0;
    left:0;
    display:none;
}

然后这将显示悬停时的子菜单

#header ul li:hover ul{
   display:block;
}

---

子菜单代码在哪里以及如何使其界面看起来至少共享这些内容我已经用子菜单代码更新了我的问题。我有子菜单的代码，但问题是它会产生冲突，正如我在问题中提到的，你能为你的代码@Priyabapat创建jsfiddel吗，这里是创建jsfiddel的链接我是初学者，我不这么认为，你能帮我做吗？好的，会为你创建jsfiddel，但你的代码仍然完整，请为html子菜单编写代码。将为您创建JSFIDEL@PriyabapatI已将此代码添加到我的CSS中，但现在如何处理子菜单？您需要使用CSS单独设置子菜单的样式，如下所示：ul li ul{//styles here}.现在你在这里得到了我的问题，我的代码正在创建冲突。请查看我的CSS代码和我的子菜单CSS代码，然后所有内容都将为你清除。你的HTML结构不正确。子菜单HTML应该是header div中main的一部分。下面是我使用基本HTML和CSS为您创建的一个简单JSFIDLE，它演示了第二个链接有一个子菜单，你可以检查它的HTML结构和CSS，然后修改你的HTML：它的工作，但有一个问题，它显示的子菜单在直线形式，并有子菜单和按钮之间的空间。这里有没有办法给你看一张它的照片？

#header ul li {
    list-style-type: none;
    float: left;    
    margin: 0;
    padding: 0;
    width: 121px;
    position:relative;

ul{
    padding: 0;
    list-style: none;
    position:absolute;
    top:0;
    left:0;
    display:none;
}

#header ul li:hover ul{
   display:block;
}