如何將鼠標懸停占用頁面寬度的100％

Question

我有這個導航欄...當我將鼠標懸停在一個選項上時，我希望它占據100％的寬度，以使其覆蓋整個屏幕。 當我將寬度更改為100％時，它會變小，而不會變大。

的HTML

<div id="cssmenu">

            <ul>
                <li class="has-sub"><a href="#"><span>Details</span></a>
                    <ul>
                        <li>
                            <?php include 'summary.php';?>
                        </li>
                    </ul>
                </li>
                <li class="has-sub"><a href="#"><span>.....</span></a>

                </li>
            </ul>
        </div>

的CSS

@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
        /* Starter CSS for Menu */
        #cssmenu {
          padding: 0;
          margin: 0;
          border: 0;
          width: auto;
        }
        #cssmenu ul,
        #cssmenu li {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        #cssmenu ul {
          position: relative;
          z-index: 597;
        }
        #cssmenu ul li {
          float: left;
          min-height: 1px;
          vertical-align: middle;
        }
        #cssmenu ul li.hover,
        #cssmenu ul li:hover {
          position: relative;
          z-index: 599;
          cursor: default;
        }
        #cssmenu ul ul {
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 598;
          width: 100%;
        }
        #cssmenu ul ul li {
          float: none;
        }
        #cssmenu ul ul ul {
          top: 0;
          left: 190px;
          width: 700px;
        }
        #cssmenu ul li:hover > ul {
          visibility: visible;
        }
        #cssmenu ul ul {
          bottom: 0;
          left: 0;
        }
        #cssmenu ul ul {
          margin-top: 0;
        }
        #cssmenu ul ul li {
          font-weight: normal;
        }
        #cssmenu a {
          display: block;
          line-height: 1em;
          text-decoration: none;
        }
        /* Custom CSS Styles */
        #cssmenu {
          background: #333333;
          border-bottom: 4px solid #1b9bff;
          font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
          font-size: 12px;
        }
        #cssmenu > ul {
          *display: inline-block;
        }
        #cssmenu:after,
        #cssmenu ul:after {
          content: '';
          display: block;
          clear: both;
        }
        #cssmenu ul {
          text-transform: uppercase;
        }
        #cssmenu ul ul {
          border-top: 4px solid #1b9bff;
          text-transform: none;
          min-width: 1200px;
        }
        #cssmenu ul ul a {
          background: #1b9bff;
          color: #ffffff;
          border: 1px solid #0082e7;
          border-top: 0 none;
          line-height: 150%;
          padding: 16px 20px;
          font-size: 12px;
        }
        #cssmenu ul ul ul {
          border-top: 0 none;
        }
        #cssmenu ul ul li {
          position: relative;
        }
        #cssmenu ul ul li:first-child > a {
          border-top: 1px solid #0082e7;
        }
        #cssmenu ul ul li:hover > a {
          background: #4eb1ff;
          color: #ffffff;
        }
        #cssmenu ul ul li:last-child > a {
          -moz-border-radius: 0 0 3px 3px;
          -webkit-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          -moz-box-shadow: 0 1px 0 #1b9bff;
          -webkit-box-shadow: 0 1px 0 #1b9bff;
          box-shadow: 0 1px 0 #1b9bff;
        }
        #cssmenu ul ul li:last-child:hover > a {
          -moz-border-radius: 0 0 0 3px;
          -webkit-border-radius: 0 0 0 3px;
          border-radius: 0 0 0 3px;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
        }
        #cssmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px;
        }
        #cssmenu ul li:hover > a,
        #cssmenu ul li.active > a {
          background: #1b9bff;
          color: #ffffff;
        }
        #cssmenu ul li.has-sub > a:after {
          content: '+';
          margin-left: 5px;
        }
        #cssmenu ul li.last ul {
          left: auto;
          right: 0;
        }
        #cssmenu ul li.last ul ul {
          left: auto;
          right: 99.5%;
        }
        #cssmenu a {
          background: #333333;
          color: #CBCBCB;
          padding: 0 20px;
        }
        #cssmenu > ul > li > a {
          line-height: 48px;
          font-size: 12px;
        }

它需要為100％，而不是1200px，因為我希望它可以正確地適合不同的屏幕。

Answer 1

如果您想獲取視口的百分比，則可以使用CSS3使用VW（視口寬度）和VH（視口高度）

Answer 2

為了使子菜單的寬度為100％，應在#cssmenu中添加相對位置。 刪除應用於li.hover的相對位置