Question

当我将鼠标悬停在下拉菜单上时，它似乎没有出现，没有任何反应，就像整个事情都缺失一样..

#menu {
    position: relative;
    width: 100%;
    overflow: auto;
    height:25px;
    background: rgb(38, 42, 53);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(38, 42, 53, 1)), color-stop(100%, rgba(40, 45, 63, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#262a35', endColorstr='#282d3f', GradientType=0);
    /* IE6-9 */
}
ul#menu {
    margin:0;
    padding:0;
    list-style-type: none;
    text-transform: uppercase;
    font-size: 15px;
}
ul#menu li {
    display:inline-block;
    float:left;
    margin:0;
    padding:3px 10px 0 70px;
}
ul#menu li a {
    display:inline-block;
    float:left;
    color:#84FD00;
    /* #874B46 */
    text-decoration:none;
    padding:0;
    height:12px;
}
ul#menu li ul {
    padding: 0;
    position: absolute;
    top:50px;
    left: 0;
    width: 100px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:none;
    opacity: 0;
    visibility: hidden;
}
ul#menu li ul li {
    background: #555;
    dipslay: inline;
    color: #fff;
}
ul#menu li ul li:hover {
    background: #666;
}
ul#menu li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

代码是2个代码的混合，也许我没有做对。只有下拉部分不起作用（ul＃menu li ul是什么）。

HTML代码：

<ul id="menu">
            <li><a href="index.php">News</a></li>
            <li><a href="forum.php">Forum</a></li>
            <li><a href="Demos.php">Demos</a>
                <ul>
                    <li><a href="demos.php">Recorded demos</a></li>
                </ul>
            </li>
            <li><a href="Rules.php">Rules</a></li>
            <li><a href="Administration.php">Administration</a></li>
            <li><a href="search.php">Search</a></li>
        </ul>

Answer 1

<强> DEMO

主要错误是因为，你有溢出：auto;在#menu。

我做了一些更改，这个css将解决问题

#menu {
    position: relative;
    width: 100%;
    height:25px;
    background: rgb(38, 42, 53);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(38, 42, 53, 1)), color-stop(100%, rgba(40, 45, 63, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#262a35', endColorstr='#282d3f', GradientType=0);
    /* IE6-9 */
}
ul#menu {
    margin:0;
    padding:0;
    list-style-type: none;
    text-transform: uppercase;
    font-size: 15px;
}
ul#menu li {
    display:inline-block;
    float:left;
    margin:0;
    padding:3px 10px 0 70px;
   postition: relative;
}
ul#menu li a {
    display:inline-block;
    float:left;
    color:#84FD00;
    /* #874B46 */
    text-decoration:none;
    padding:0;
    height:12px;
}
ul#menu li ul {
    padding: 0;
    position: absolute;
    top:50px;
    width: 100px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:none;
    opacity: 0;
    visibility: hidden;
}
ul#menu li ul li {
  background: #555;
color: #fff;
padding-left: 0px;
padding: 10px 10px;
}
ul#menu li ul li:hover {
    background: #666;
}
ul#menu li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
   padding: 0;
    position: absolute;
    top:25px;
    height: auto;
    width: 200px;
}

Answer 2

你的问题是顶级元素＆＃34;＃menu＆＃34;高度为25像素并且自动溢出...这导致一切都被隐藏。

尝试添加此css：

ul#menu:after {
  content: "";
  display: table;
  clear: both;
}

并删除显示overflow:auto;＆lt; ---的属性（编辑：抱歉，我之前输错了）

您将看到下拉菜单。

基本上这个解决方案会导致浮动自行清除而不使用溢出自动。

加成：

将position: relative;添加到您的ul#menu li，下拉列表将开始与您的顶级导航相符。

我会把剩下的留给你：）

Answer 3

你可以在你的代码和样式上使用这种结构

CSS：

*{padding:0;margin:0;}

ul#menu li {
    position:relative;
    list-style-type:none;
    float: left;
    padding:0px;
    width: 125px;
    height: 25px;
}
ul#sub1 {
    position:absolute;
    left:0;
    width:125px;
    visibility: hidden;
    display:none;
}
ul#menu li:hover #sub1 {
    display:block;
    visibility:visible;
}

HTML：

<ul id="menu">
    <li><a href="#">Hyperlink 1</a>
    </li>
    <li><a href="#">Hyperlink 2</a>

        <ul id="sub1">
            <li><a href="#">Hyperlink 2.1</a>
            </li>
            <li><a href="#">Hyperlink 2.2</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Hyperlink 3</a>
    </li>
    <li><a href="#">Hyperlink 4</a>
    </li>
</ul>

我无法获得CSS下拉菜单工作

3 个答案: