Question

我正在尝试创建一个带有下拉子菜单的导航栏的页面。遗憾的是，出现问题：将鼠标悬停在选项上会使子菜单显示在栏上并水平列出子菜单选项。

这是HTML：

<!DOCTYPE html>
<html>
<head>
<title>Toy CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<style>
/* -------------------------MAIN-MENU----------------------- */
#topmenu ul {
    margin-left: 0; /* clears default margins */
    padding-left: 0; /* clears default padding */
    background-color: #036;
    color: white;
    float: left;
    width: 100%; /* creates complete bar */
    font-family: arial, helvetica, sans-serif;
}

#topmenu li {
    display: inline;
}


/* ----------------------MAIN-MENU-LINKS-------------------- */

#topmenu a {
    padding: 3px 10px;
}

#topmenu a:link, #topmenu a:visited {
    padding: 0.2em 1em;
    background-color: #036;
    color: white;
    float: left;
    border-right: 1px solid #fff;
    text-decoration: none; /* removes link underlining */
}

#topmenu a:hover {
    color: #fff;
    background-color: #369;
}

/* --------------------------SUBMENU------------------------ */

#topmenu li ul {
    display: none;
    background-color: #69f;
}

#topmenu li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}

#topmenu li:hover li {
    float: none;
}

#topmenu li:hover li a {
    background-color: #69f;
    border-bottom: 1px solid #fff;
    color: #000;
}

#topmenu li li a:hover {
    background-color: #8db3ff;
}


/* -------------------------------------------------------------------------------- */

.mainbox {
    border: 2px solid black;
    float: left;
    margin: 10px 0px 0px 0px;
    min-height: 500px;
    padding: 20px;
    width: 600px;
}
.mainbox ul li {
    width: 500px;
}
.mainbox {
    display: none;
}
</style>

</head>


<script>
$(function() {
    $('#topmenu li a').click(function(e) {
        e.preventDefault();
        var tabContent = this.hash;
        $(tabContent).show().siblings('.mainbox').hide()
    });
});
</script>



<body>

<!-----------–-–-–-–--------TOP-MENU-------------------------->
<div id="topmenu">
  <ul>
    <li>
    <a href="#optiona">Option A</a>
    <ul>
    <li>A1</li>
    <li>A2</li>
    <li>A3</li>
    <li>A4</li>
    <li>A5</li>
    </ul>
    </li>
    <li>
    <a href="#optionb">Option B</a>
    <ul>
    <li>B1</li>
    <li>B2</li>
    <li>B3</li>
    <li>B4</li>
    </ul>
    </li>
    <li>
    <a href="#optionc">Option C</a>
    </li>
  </ul>
</div>
<!-----------–-–-–-–---------OPTIONS-------------------------->
<div id="optiona" class="mainbox">
<h2>Option A</h2>
<p>You've selected Option A. Here is a list.</p>

    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
</div> 
<div id="optionb" class="mainbox">
<h2>Option B</h2>

<p>You've selected Option B. Here is a list.</p>
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
</div> 
<div id="optionc" class="mainbox">

<h2>Option C</h2>
<p>You've selected Option C. Here is a list.</p>
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>

</div>
</body>
</html>

非常感谢你的帮助！

Answer 1

#topmenu ul li {
    display: list-item;;
}

#topmenu ul li ul {
    margin-top:25px !important;
}

应该做的诀窍......

See it in action

Answer 2

问题的根源是

#topmenu li {
    display: inline;
}

是级联的，因此子菜单<li/>也是内联的。你应该用

之类的东西来纠正它

#topmenu li li {
    display: block;
}

从那里开始：）

完成关于下拉子菜单的新手CSS问题

2 个答案: