CODEWITHSUNDEEP
htmlcssdrop-down-menu
user1411281
user1411281

Reputation: 33

CSS Dropdown menu with horizontal submenu

I have the following site http://jsfiddle.net/Me4fw/4/ in which I am attempting to implement a horizontal css drop down menu that has a submenu which is also horizontal. I have tried everything but nothing seems to get the submenu items to sit inline with each other. All I can get them to do is mash up ontop of each other and be ugly/unreadable.

Upvotes: 2

Views: 10646

Answers (3)

Graphicz
Graphicz

Reputation: 1

Some tweaks to give second level submenus:

/* Menu */
#menu { /* UPDATED */
    width: 820px;
    height: 60px;
    margin: 0 auto;
    padding: 0px 40px;
    position: relative;
}

#menu ul {
 margin: 0;
 padding: 0px 0px 0px 0px;
 line-height: normal;
 line-style: none;
 list-style-type: none;
}

#menu a {
 display: block;
 height: 20px;
 margin-right: 1px;
 padding: 10px 20px 0px 20px;
/*  height: 40px;
 margin-right: 1px;
 padding: 20px 20px 0px 20px;*/
 text-decoration: none;
 text-transform: uppercase;
 font-family: 'Abel', sans-serif;
 font-size: 16px;
 font-weight: normal;
 color: #FFFFFF;
 border: none;
}

#menu a:hover {
 background: url(images/page-content-bg.png) repeat;
}

#menu ul ul a:hover {
 background: url(images/page-menu-bg.png) repeat;
}

#menu .current_page_item a {
 background: url(images/page-content-bg.png) repeat;
}



#menu li { /* UPDATED */
    float: left;
}

/* UPDATED, REMOVED
#menu ul li ul li #jackie_spencer{
 display: inline;
 position: absolute;
 top: 20px;
 left: 0;
 width: 100px;    
 color: #FFF;
}
*/
#menu ul ul { /* UPDATED */
    list-style-type: none;
    position: absolute;
    z-index: 500;
    left: 50px;
    right: 0;
}

#menu ul ul ul {
 position: absolute;
/* top: 0;
 left: 100%;*/
     z-index: 500;
    left: 50px;
    right: 0;

}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
div#menu ul ul li:hover {   background:#c0c0c0;}
div#menu ul ul li { background:#cccccc;}
div#menu ul ul li a:hover { color:#000;}

Page code

<div id="menu">
                <ul>
                    <li class="current_page_item"><a id="home_menu" href="#Home">Home</a><ul>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a>
    <ul>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
</ul>
  </li>
</ul></li>
                    <li><a id="aboutus_menu" href="#About_Us">About Us</a><ul>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul></li>
                </ul>
                <ul>
                    <li><a id="what_we_do" href="#What_We_Do">What We Do</a>
                        <ul>
                            <li><a id="jackie_spencer" href="#Jackie_Spencer">Hypnotherapy</a></li>
                            <li><a id="diana_menz" href="#Diana_Menz">Massage</a></li>
                            <li><a id="afton_land" href="#Jackie_Spencer">Estitician</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li><a id="contactus_menu" href="#Contact_Us">Contact Us</a><ul>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul></li>
                </ul>
            </div>

Upvotes: 0

Richard Connamacher
Richard Connamacher

Reputation: 3216

I took a look at your page, and the reason your submenu is vertical is the submenu <ul> is too narrow: its width is the same as enclosing <li>. You should set a width on it to make it take up all available space.

Making it left-aligned with the parent element and right-aligned with the right end of the menu bar is tricky. You might just want to set it to something wide enough to hold everything you know will be in it, and assume there won't be any reflow.

You also could use some JavaScript to calculate the right positions for it. JQuery is good for that. You'd only need to set those once when the page is first loaded, as part of $(document).ready().

Upvotes: 1

Zuul
Zuul

Reputation: 16269

You problem is that you are placing the sub-menu absolutly positioned to the parent li. But the parent li has a small width.

The solution is to place the sub-menu absolutely positioned to the menu wrapper.

See this link with a working presentation!

UPDATE YOUR CSS:

#menu {
  width: 820px;
  height: 60px;
  margin: 0 auto;
  padding: 0px 40px;
  position: relative;
}

#menu li {
  float: left;
}

#menu ul ul {
  list-style-type: none;
  position: absolute;
  z-index: 500;
  left: 0;
  right: 0;
}

AND DELETE THIS CSS:

#menu ul li ul li #jackie_spencer{
  display: inline;
  position: absolute;
  top: 20px;
  left: 0;
  width: 100px;    
  color: #FFF;
}

Note:

You can view the source and check the CSS:

  • where it reads "updated", some definitions were changed!
  • Where it reads "updated, deleted", the declarations were deleted.

Upvotes: 3

Related Questions