Question

我是css的新手，我正在自己的网站上学习它。尝试了许多建议已经过了2天，但我承认我现在已经陷入困境。问题是我有一个包含4个项目的菜单。第二项应该是悬停时的下拉菜单。当我悬停时，下拉项目显示在第3个菜单项下。我不知道它的css或html /也许专家可以解决这1分钟？违规代码低于

HTML
<div id="menu">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a>
  <ul>
    <li><a href"#">Product 1</a></li>
    <li><a href"#">Product 2</a></li>
  </ul> 
  </li>
  <li><a href="#">About</a>
  <li><a href="#">Contact</a>
</ul>
</div>
<!-- end div#menu -->

和CSS

/* Menu */

#menu {
width: 940px;
height: 47px;
margin: 0 auto;
background: url(images/img02.jpg) repeat-x left top;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
margin-left: 0px;
}

#menu li {
display: inline;
text-align: center;
position:relative;
}

#menu a {   
display: block;
float: left;
width: 100px;
height: 32px;
margin-right: 2px;
padding: 15px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
color: #3CF;
}

#menu a:hover, #menu .active a {
background: #000000;
color: #FFFFFF;


}

#menu ul ul {
position:absolute;
visibility:hidden;
top:30px;
left: 100%;
width: 100%;

}

#menu ul li a {

text-align:center;

}

#menu ul li:hover ul {
display:block;
position:absolute;
visibility:visible;
position:absolute;
background: #000000;
color: #FFFFFF;


}

感谢任何希望帮助我的人！

[UPDATE]

谢谢你们。两个提供的示例都有效如果你们中的任何一个人能够指出我正确的方向，以保持下一个div元素（两个例子都向下扫描它），那么我可以愉快地继续前进。 THX！

Answer 1

对float:left

使用display:inline代替LI #menu ul ul

中的

使用left:0

......一切都会好的。

Answer 2

工作一：http://jsfiddle.net/XbHxL/

我做了一些改动，主要是位置，显示，浮动等。

Answer 3

我已经在JSFiddle上模拟了一个简化示例来演示......

http://jsfiddle.net/Sohnee/HYNxd/2/

这是代码。

HTML

请注意，您错过了一些结束标记，还有一些=标志符号。

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

#menu ul li {
    display: block;
    float: left;
}

#menu ul li ul {
    display: none;
    position: absolute;   
}

#menu ul li ul li {
    display: block;
    float: none;
}

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

#menu a {
    display: block;
    padding: 0.4em 1.2em;
    text-decoration: none;
    color: #3CF;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}

#menu a:hover {
    color: White;
    background-color: #3CF;
}

CSS下拉菜单小问题

3 个答案: