CODEWITHSUNDEEP
htmlcss
PieterB
PieterB

Reputation: 140

CSS dropdown submenu wider than parent

I'm trying to make my submenu of my navigation wider than the parent li. This doesn't work. I added the following CSS to my menu:

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;
}

With the following 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>

Looked at several solutions here, but kind find the problem why the sub-menu will not be wider than the parent li.

Upvotes: 1

Views: 1802

Answers (3)

Jacob King
Jacob King

Reputation: 196

Here is the correct syntax for creating your menu.

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/

Upvotes: 0

Eric Whitehead
Eric Whitehead

Reputation: 130

Set a width on nav > div > ul > li > ul.sub-menu.

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/

Upvotes: 1

Liftoff
Liftoff

Reputation: 25392

Increase (actually add, as it wasn't there before) the width of 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

Upvotes: 0

Related Questions