Question

你好我有三个按钮，在这三个按钮中，第二个按钮（查看属性）

用户将鼠标悬停在

按钮时我想通过悬停三个

添加三个选项

选项应该出现，当鼠标移出时，它应该隐藏起来。

在这里，我使用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; 
}

HTML Code

<div id="header">

              <ul>
                  <li class="selected"><a href="Home.php"><span>Home</span></a></li>
                  <li><a href="#">View Properties By</a></li>
                  <li><a href="../Services.php"><span>Service</span></a></li>   
              </ul>
</div>

Sub Menu CSS Code:

    ul{
        padding: 0;
        list-style: none;
    }
    ul li{
        float: left;
        width: 190px;
        text-align: center;
        line-height: 21px;
    }
    ul li a{
        display: block;
        padding: 5px 10px;
        color: #333;
        background: #f2f2f2;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul{
        display: none;
    }
    ul li:hover ul{
        display: block; /* display the dropdown */
    }

Sub Menu HTML Code

<ul>
        <li>
            <a href="#">View Properties By &#9662;</a>
            <ul>
                <li><a href="#">View By Image</a></li>
                <li><a href="#">View By Price</a></li>
                <li><a href="#">View By Zone</a></li>
            </ul>
        </li>
    </ul>

Answer 1

click to demo 只需修改此类

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

}

Answer 2

您需要将子菜单的position设置为absolute，以防止您将碰撞引用的内容。将其添加到样式表中：

ul li:hover ul{
        position: absolute;
}

Answer 3

首先删除#header ul overflow：hidden，你不需要这个。如果你确实需要一个容器，那么将导航包装在另一个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;
}

如何提供菜单子菜单选项

3 个答案: