1

我正在尝试制作一个垂直导航菜单，我对编码很陌生，并且有点迷路。除了我希望子菜单与实际菜单具有相同的宽度之外，菜单可以按照我的意愿工作并且看起来很好，请帮助！我也可以在菜单居中提供一些帮助，我尝试了文本对齐，但无济于事

这是我的 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;
   }
4

2 回答 2

1

如果您position: relative在选择器上放置一个样式#cssmenu ul li ul，您将获得下拉以跨越整个宽度。

然后，您需要调整width: 170px硬编码#cssmenu li li以width: 100%使列表项也跨越整个宽度。

于 2013-09-13T16:37:41.377 回答
-1

我已经解决了这个问题：子菜单宽度与主菜单宽度相同

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

于 2013-09-13T16:16:47.540 回答