我的子菜单有问题。其中两个子菜单值重叠,但显示不正确。
我已将css放在同一页面上的<style></style>
标题之间。
问题在于子菜单值&#39; 18F&#39;和&#39; 18G&#39;。我在这里加了相关代码,所以你可以清楚地看到它。 &#39; 18F&#39;与'18E&#39;重叠和&#39; 18G&#39;。
这是代码。
#dropnav
{height:75px; background:#800080;} /* Changes the height and bg color of the main menu */
#dropnav ul
{margin:0px; padding:0px;}
#dropnav ul li
{display:inline; float:left; list-style:none; margin-left:5px; position:relative; height:25px; width: 150px;} /* only edit the last 2 items - sets the width of the main menu */
#dropnav li a
{color:#FFF; text-decoration:none;} /* Changes the link color of items on the main menu */
#dropnav li a:hover
{color:yellow; text-decoration:none;}/* Changes the hover color of items on the main menu */
#dropnav li ul
{margin:0px; padding:10px; display:none; position:absolute; left:0px; z-index: 99; top:25px; background-color:yellow;} /* Only edit the last 2 items - set the top margin and background color of the submenus */
#dropnav li:hover ul
{display:block; height:200px; width:175px;} /* sets the height & width of the submenus */
#dropnav li li
{list-style:none; display:list-item;} /* DO NOT EDIT */
#dropnav li li a
{color:#000; text-decoration:none;} /* Changes the link color of items in the submenu */
#dropnav li li a:hover
{color:#900; text-decoration:none;} /* Changes the hover color of items in the submenu */
li#main {padding-top: 5px; padding-right: 0px; padding-left: 0px;} /*Sets the padding of items in the main menu */
&#13;
<div id="centernav">
<div id="dropnav">
<ul>
<li id="main">
<a href="section_one.html">Section One</a>
</li>
<li id="main">
<a href="section_two.html">Section Two</a>
</li>
<li id="main">
<a href="section_three.html">Section Three</a>
</li>
<li id="main">
<a href="section_four.html">SECTION FOUR</a>
</li>
<li id="main">
<a href="section_five.html">Section Five</a>
</li>
<li id="main">
<a href="section_six.html">Section Six</a>
</li>
</li>
<li id="main">
<a href="section_seven.html">Section Seven</a>
<ul id="subnav">
<li><a href="section_eight.html">Section Eight</a></li>
<li><a href="section_nine.html">Section Nine</a></li>
</ul>
</li>
<li id="main">
<a href="section_ten.html">Section Ten</a>
</li>
<li id="main">
<a href="section_eleven.html">Section Eleven</a>
<ul id="subnav">
<li><a href="section_twlve.html">Section Twelve</a> </li>
<li><a href="section_thirteen.html">Section Thirteen</a></li>
<li><a href="section_fourteen.html">Section Fourteen</a></li>
</ul>
</li>
<li id="main">
<a href="section_fifteen.html">Section Fifteen</a>
</li>
<li id="main">
<a href="section_sixteen">Section Sixteen</a>
</li>
<li id="main">
<a href="section_seventeen.html">Section Seventeen</a>
</li>
<li id="main">
<a href="section_eighteen.html">Section Eighteen</a>
<ul id="subnav">
<li><a href="section_eighteen_a">Section 18A</a></li>
<li><a href="section_eighteen_b.html">Section 18B</a> </li>
<li><a href="section_eighteen_c.html">Section 18C</a> </li>
<li><a href="section_18_d.html">Section 18D</a></li>
<li><a href="section_18_e.html">Section 18E</a></li>
**<li><a href="section_18_f.html">Section 18F</a></li>
<li><a href="section_18_g.html">Section 18G</a></li>**
</ul>
</li>
<li id="main">
<a href="section_19.html">Section 19</a>
</li>
<li id="main">
<a href="section_20.html">Section 20</a>
</li>
<li id="main">
<a href="section_21.html">Section 21</a>
<ul id="subnav">
<li><a href="section_21_a.html">Section 21A</a></li>
<li><a href="section_21_b.html">Section 21B</a></li>
<li><a href="section_21_c.html">Section 21C</a></li>
</ul>
</li>
<li id="main">
<a href="section_22.html">Section 22</a>
</li>
&#13;