重叠子菜单值

时间:2015-10-07 21:31:14

标签: css list

我的子菜单有问题。其中两个子菜单值重叠,但显示不正确。

我已将css放在同一页面上的<style></style>标题之间。

问题在于子菜单值&#39; 18F&#39;和&#39; 18G&#39;。我在这里加了相关代码,所以你可以清楚地看到它。 &#39; 18F&#39;与'18E&#39;重叠和&#39; 18G&#39;。

这是代码。

&#13;
&#13;
#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;
&#13;
&#13;

0 个答案:

没有答案