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的位置

如何在悬停时占用100％的页面宽度

2 个答案: