Question

我正在尝试制作一个垂直导航菜单，我对编码非常陌生并且有点迷失。菜单工作我想要的方式和看起来很好，除了我希望子菜单具有与实际菜单相同的宽度，请帮忙！我也可以通过一些帮助来集中菜单，我尝试了文本对齐，但无济于事

这是我的HTML

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Vehicles</span></a></li>
<li><a href='#'><span>Prices</span></a></li>
<li class='has-sub last'><a href='#'><span>Contact Us</span></a>
  <ul>
     <li><a href='#'><span>Book A Lesson</span></a></li>
     <li class='last'><a href='#'><span>Send Us A Message</span></a></li>
  </ul>
</li>
</ul>
</div>

和CSS

     #cssmenu {
     border: none;
     border: 0px;
     margin: 0px;
     padding: 0px;
     font: 80% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande',     Verdana, Helvetica, sans-serif;
     font-size: 16px;
     font-weight: bold;
     width: 100%;
     text-align: center;
    }
    #cssmenu ul {
     text-align: center;
     background: #000000;
     height: 40px;
     list-style: none;
     margin: 0;
     padding: 0;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
     -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
     box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
    }
    #cssmenu li {
     text-align: center;
     float: left;
     padding: 0px 0px 0px 15px;
     width: 18%;
    }
    #cssmenu li a {
     color: #ffffff;
     display: block;
     font-weight: normal;
     line-height: 50px;
     margin: 0px;
     padding: 0px 25px;
     text-align: center;
     text-decoration: none;
    }
    #cssmenu li a:hover {
     background: #f6dc30;
     color: #000000;
     text-decoration: none;
     -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
     box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
    }
    #cssmenu ul li:hover a {
     background: #f6dc30;
     color: #000000;
     text-decoration: none;
    }
    #cssmenu li ul {
     display: none;
     height: auto;
     padding: 0px;
     margin: 0px;
     border: 0px;
     position: absolute;
     z-index: 200;
    }
    #cssmenu li:hover ul {
     display: block;
    }


     #cssmenu li li {
         display: block;
         float: none;
         margin: 0px;
         padding: 0px;
         width: 170px;
         background: #000000;
         }
    #cssmenu li:hover li a {
     background: none;
     background: #f6dc30;
    }
    #cssmenu li ul a {
     display: block;
     height: 50px;
     font-size: 12px;
     font-style: normal;
     margin: 0px;
     padding: 0px 10px 0px 15px;
     text-align: left;
   }
    #cssmenu li ul a:hover,
    #cssmenu li ul li:hover a {
     background: #f6dc30;
     border: 0px;
     color: #000000;
     text-decoration: none;
   }

Answer 1

如果您在选择器position: relative上添加了#cssmenu ul li ul样式，则下拉菜单将覆盖整个宽度。

然后，您需要将width: 170px上的#cssmenu li li硬编码调整为width: 100%，以使列表项目也能够覆盖整个宽度。

Answer 2

我已修复此问题：子菜单宽度与主菜单宽度相同

试试这个.. http://codepen.io/bala5394/pen/aJszj

如何使子菜单具有与菜单CSS / HTML5相同的宽度

2 个答案: