Geek asks and answers

Drop-down menu - create a <ul> submenu 100% wide

I'm a little crazy trying to achieve something that my client wants. I could tell them that this is impossible, but I love a good challenge;)

Basically, I'm trying to create a drop-down menu in which a drop down menu <ul>or:

ul.menu li ul

surrounded by a div. View:

<ul class="menu">
   <li>
       <a href="#">Item</a>
       <div class="submenu">
           <ul>.....</ul>
       </div>
   </li>
</ul>

I want the div to have a width of: 100% and fill the entire width of the page, but align the UL according to the corresponding <li>.

The task <div class="submenu">will be as wide as the container relative, whether it be the main one <ul class="menu">or the <div>wrapping <ul class="menu">.

The website itself is 1000 pixels wide and centered margin:0 auto;

Hope I explained correctly: S Here is a link to the layout I put together: Drop-down menu Layout

.

, Alex

+3
2

, , , -. - .

, ( : , IE): http://jsfiddle.net/doubleswirve/xbLrW/2/

div . , :

<div class="nav">
  <ul>

    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Widget A</a></li>
        <li><a href="#">Widget B</a></li>
        <li><a href="#">Widget C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Locations</a>
      <ul>
        <li><a href="#">Location A</a></li>
        <li><a href="#">Location B</a></li>
        <li><a href="#">Location C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Staff</a>
      <ul>
        <li><a href="#">President</a></li>
        <li><a href="#">VP</a></li>
        <li><a href="#">Manager</a></li>
      </ul>
    </li>

  </ul>
</div>

:

/* GENERAL */

body { overflow-x: hidden; } /* trick from css-tricks comments */

/* FIRST LEVEL */

.nav > ul > li { 
  display: inline-block; 
  position: relative; 
  padding: 3px 10px 3px 0;
  z-index: 100;
}

/* SECOND LEVEL */

.nav > ul > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0 1000em; /* trick from css-tricks comments */
  margin: 0 -1000em; /* trick from css-tricks comments */
  z-index: 101;
  visibility: hidden;
  opacity: 0;
  background: rgba(255, 240, 240, 0.8);
}

.nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}

.nav > ul > li > ul > li {
  padding: 3px 0;
}

CSS, ul:

.nav > ul > li > ul {
  ...
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

- , IE , .

, , :

lol.

+7

, .

, , , divs

position:absolute

, . , , , : .

, , , , . , , , "" , -, , IE6 Firefox 1.5, "".

+1

More articles:


All Articles