Question

我试图让我的导航子菜单比父李更宽。这不起作用。我在菜单中添加了以下CSS：

nav {
    background:#302583;
    height:45px;
}
nav>div>ul {
    list-style: none;
    position: relative;
}
nav>div>ul>li {
    display:inline-block;
    margin:15px 30px;
    position:relative;
}
nav>div>ul>li>a, ul.sub-menu>li>a {
    color:#ccccff;
    font-size:14px;
    text-transform: uppercase;
    font-family:'Varela';
    font-weight:normal;
    text-decoration: none;
}
ul.sub-menu>li>a {
    border-bottom:1px solid #e3030e;
    padding:5px 10px;
}
nav>div>ul>li>ul.sub-menu {
    left: -9999px;
    position: absolute;
    z-index:10;
    background:#302583;
    float:left;
}
nav>div>ul>li>ul.sub-menu>li {
    padding: 5px;
    float:none;
}
nav ul>li:hover ul.sub-menu {
    left: 0;
}

使用以下HTML：

<nav>
   <div class="container">
      <ul id="menu-hoofdmenu" class="menu">
          <li><a href="/">Homepage</a></li>
          <li><a href="/?page_id=13">Professionals</a>
              <ul class="sub-menu">
              <li><a href="/?page_id=19">Werken in de industrie</a></li>
              </ul>
          </li>
          <li><a href="/?page_id=11">Diensten</a>
              <ul class="sub-menu">
             <li><a href=/?page_id=17">Projecten</a></li>
                 <li><a href="/?page_id=15">Werkwijze</a></li>
               </ul>
          </li>
          <li><a href="/?page_id=35">Contact</a></li>
      </ul>
   </div>
</nav>

在这里看了几个解决方案，但很友好地发现了为什么子菜单不会比父li更宽的问题。

Answer 1

在导航栏上设置宽度＆gt; div> ul＆gt; li> ul.sub菜单。

nav > div > ul > li > ul.sub-menu {
    background: none repeat scroll 0 0 #302583;
    float: left;
    left: -9999px;
    position: absolute;
    width: 120%;
    z-index: 10;
 }

http://jsfiddle.net/E8B9G/

Answer 2

增加（实际上添加，因为它不在之前）ul.sub-menu的宽度：

nav>div>ul>li>ul.sub-menu {
    left: -9999px;
    position: absolute;
    z-index:10;
    background:#302583;
    float:left; 

    width: 300px; /* <---This one */
}

JSFiddle

Answer 3

以下是创建菜单的正确语法。

nav{ background-color:#302583; float:left; width:100%}
nav ul{ position: relative; float:left; margin:0;}
    nav li{ list-style: none; position:relative; float:left;}
        nav a { padding:20px; color:#ccccff; font:normal 14px 'Varela'; text-transform:uppercase; text-decoration: none; display:block; }

            nav ul.sub-menu { padding:0; display:none; position:absolute; background:#302583; }
                nav ul.sub-menu li{ }
                    nav ul.sub-menu a{ border-bottom:1px solid #e3030e;}

            nav li:hover ul.sub-menu{ display:block }

的jsfiddle： http://jsfiddle.net/uidezigns/eS4hu/

CSS下拉子菜单比父级更广泛

3 个答案:

JSFiddle