homepage Welcome to WebmasterWorld Guest from 54.166.123.2
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
UL inside UL (li), CSS Dropdown Menu
arod




msg:3706284
 2:13 pm on Jul 24, 2008 (gmt 0)

Hello everyone! I'm designing a new website and I can't fathom why Internet Explorer is cutting off my CSS menu. I have included the HTML and CSS.

Basically what's happening, is that I have a UL dropdown list, and for the second level dropdown, another UL inside the previously mentioned UL (inside the LI of that UL). The first dropdown level drops down as a UL when you mouseover the menu links, then when you mouseover the dropdown links (which exist as <li>s), you get another UL that comes up. The second UL pops up to the right of the <li> link, over the top of the first level dropdown ul. However, it kinda overlaps about 5px. To explain this, imagine the secondary menu being out to the right of the first menu, and then giving the second level menu a -5px margin. This isn't what we did, but it's just to illustrate it. So it's out and to the right, with 5 pixels overlapping.

So it goes Menu DIV--> UL-->LI--->UL-->LI. In Firefox, the menu works just fine...as is to be expected.

However, with Internet Explorer 7, the second level UL cuts off as soon as the first UL ends. It won't show "outside" of the UL. It shows about 5pixels (the overlapped part), but outside the area of the first level dropdown UL, it just disappears. If anybody needs further clarification, please let me know.

Doctype..

-//W3C//DTD XHTML 1.0 Transitional//EN

Here is the HTML for the menu...


<div class="MainMenu">

<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 100%;">
<ul id="mainMenu" class="menu">


<li class="ParentItemHover"><a href='http://www.example.com/dedicated/enterprise/'>
Enterprise Solutions<span style='font-style:trebuchet; font-size:10; font-weight:normal;'> &nbsp;&raquo;&nbsp;</span></a>

</li>


<li class="ParentItemHover"><a href='http://www.example.com/hosting/'>
Hosting Solutions<span style='font-style:trebuchet; font-size:10; font-weight:normal;'> &nbsp;&raquo;&nbsp;</span></a>
<ul><li class='SubItemsContainer'><a href="">Shared Hosting&nbsp;&nbsp;&nbsp;&nbsp;<span class='Level2ItemArrow'>&nbsp;</span></a><ul class='Level2Container'><li class='SubItemsLevel2Container'><a href="http://www.example.com/hosting/basetier.aspx">Base Tier Hosting</a></li><li class='SubItemsLevel2Container'><a href="http://www.example.com/hosting/tier1.aspx">Tier 1 Hosting</a></li><li class='SubItemsLevel2Container'><a href="http://www.example.com/hosting/tier2.aspx">Tier 2 Hosting</a></li><li class='SubItemsLevel2Container'><a href="http://www.example.com/hosting/tier3.aspx">Tier 3 Hosting</a></li></ul></li><li class='SubItemsContainer'><a href="http://www.example.com/virtualservers/">Virtual Servers&nbsp;&nbsp;&nbsp;&nbsp;<span class='Level2ItemArrow'>&nbsp;</span></a><ul class='Level2Container'><li class='SubItemsLevel2Container'><a href="http://www.example.com/vps/">Virtual Private Servers</a></li><li class='SubItemsLevel2Container'><a href="http://www.example.com/virtualservers/virtualdedicated/">Virtual Dedicated Servers</a></li><li class='SubItemsLevel2Container'><a href="http://www.example.com/virtualservers/faq.aspx">Virtual Server Hosting FAQ</a></li><li class='SubItemsLevel2Container'><a href="http://www.example.com/virtualservers/compare.aspx">Virtual Server Comparison</a></li></ul></li><li class='SubItemsContainer'><a href="http://www.example.com/hosting/features/aspdotnetstorefront/">AspDotNetStorefront Hosting</a></li><li class='SubItemsContainer'><a href="http://www.example.com/mpsm/">Proactive Update Management</a></li><li class='SubItemsContainer'><a href="http://www.example.com/products/ssl/">SSL Certificates</a></li><li class='SubItemsContainer'><a href="http://www.example.com/products/domains/">Domain Names</a></li></ul>
</li>


</ul> </td> </tr> </table>

</div>

And here is the CSS...


.MainMenu
{
text-align: left;
background-image: url( '../_Images/menu/background.jpg' );
background-repeat: no-repeat;
height: 37px;
}

/*! Main Menu Core CSS !*/
.menu .qmdivider
{
display: block;
font-size: 1px;
border-width: 0px;
border-style: solid;
position: relative;
z-index: 1;
}
.menu .qmdividery
{
float: left;
width: 0px;
}
.menu .qmtitle
{
display: block;
cursor: default;
white-space: nowrap;
position: relative;
z-index: 1;
}
.qmclear
{
font-size: 1px;
height: 0px;
width: 0px;
clear: left;
line-height: 0px;
display: block;
float: none !important;
}
.menu
{
position: relative;
zoom: 1;
z-index: 10;
}
.menu a, .menu li
{
float: left;
display: block;
white-space: nowrap;
position: relative;
z-index: 1;
}
.menu div a, .menu ul a, .menu ul li
{
float: none;
}
.qmsh div a
{
float: left;
}
.menu div
{
visibility: hidden;
position: absolute;
}
.menu .qmcbox
{
cursor: default;
display: block;
position: relative;
z-index: 1;
}
.menu .qmcbox a
{
display: inline;
}
.menu .qmcbox div
{
float: none;
position:relative;
visibility: inherit;
left: auto;
}
.menu li
{
z-index: auto;
}
.menu ul
{
left: -10000px;
position: absolute;
z-index: 10;
}
.menu, .menu ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
.menu li a
{
float: none;
}
.menu li:hover > ul
{
left: auto;
}
k #mainMenu ul
{
top: 100%;
}
#mainMenu ul li:hover > ul
{
top: 0px;
left: 100%;
}
/*! End Core Styles !*/

/*"""""""" (MAIN) Container""""""""*/
#mainMenu
{
border-width: 0px;
border-style: solid;
border-color: #ffffff;
padding-left: 10px;
height: 37px;
}

/*"""""""" (MAIN) Items""""""""*/
#mainMenu a
{
padding: 11px 10px 10px 10px;
color: #515c64;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-decoration: none;
height: 18px;
}

/*"""""""" Style of Main Items On Hover """"""""*/
ul#mainMenu .ParentItemHover:hover > a
{
background-color: transparent;
color: #FFFFFF;
background-image: url( '../_Images/menu/background_hover.gif' );
background-repeat: repeat-x;
}

/*"""""""" SUB Items Container outer edge""""""""*/
#mainMenu div, #mainMenu ul
{
padding: 10px;
margin: -2px 0px 0px;
background-color: transparent;
background-image: url( '../_Images/menu/subItemContainer_background.jpg' );
background-repeat: repeat-x;
filter: alpha(opacity=97);
-moz-opacity: .03;
opacity: .97;
}

/*"""""""" (SUB) Items""""""""*/
#mainMenu div a, #mainMenu ul a
{
padding-left: 5px;
padding-right: 3px;
padding-bottom: 0px;
padding-top: 7px;
background-color: transparent;
color: #6e6c6c;
font-family: Verdana;
font-weight: normal;
font-size: 10px;
text-decoration: none;
border-width: 0px;
border-style: none;
}

/*"""""""" Style of Sub Items background """"""""*/
ul#mainMenu ul
{
padding: 10px;
margin: -2px 0px 0px;
background-color: #ffffff;
border-width: 0px;
border-left: solid 1px #5c5b5b;
border-bottom: solid 1px #5c5b5b;
border-right: solid 1px #5c5b5b;
}

/*"""""""" Style of Sub Items On Hover when level 2 is visible """"""""*/
ul#mainMenu .SubItemsContainer:hover > a
{
background-image: url( '../_Images/menu/subItem_hoverbg2.gif' ) !important;
background-repeat: no-repeat !important;
color: #FFFFFF !important;
text-decoration: none !important;
font-family: Verdana !important;
font-weight: normal !important;
font-size: 10px !important;
height: 23px !important;
border: solid 0px #000000 !important;
}

.SubItemsContainer A, .SubItemsContainer A:Visited, .SubItemsContainer A:Active
{
text-decoration: none;
width: 180px !important;
color: #3f3f3f !important;
height: 23px !important;
background-color: transparent;
}

.SubItemsContainer A:Hover
{
background-image: url( '../_Images/menu/subItem_hoverbg2.gif' ) !important;
background-repeat: no-repeat !important;
color: #FFFFFF !important;
text-decoration: none !important;
font-family: Verdana !important;
font-weight: normal !important;
font-size: 10px !important;
height: 23px !important;
border: solid 0px #000000 !important;
}

.Level2Container
{
border: solid 1px #5c5b5b !important;
z-index: 1000;
}

.SubItemsLevel2Container
{
background-color: transparent !important;
float: left;
position: relative;
left: 0px;
z-index: 10;
}

.SubItemsLevel2Container A, .SubItemsLevel2Container A:Visited, .SubItemsLevel2Container A:Active
{
text-decoration: none;
width: 180px !important;
color: #3f3f3f !important;
height: 23px !important;
padding-left: 15px !important;
}

.SubItemsLevel2Container A:Hover
{
background-image: url( '../_Images/menu/subItem_hoverbg2.gif' ) !important;
background-repeat: no-repeat !important;
color: #FFFFFF !important;
text-decoration: none !important;
font-family: Verdana !important;
font-weight: normal !important;
font-size: 10px !important;
height: 23px !important;
border: solid 0px #000000 !important;
}

.Level2ItemArrow
{
background-image: url( '../_Images/menu/redarrow_menu.gif' ) !important;
background-repeat: no-repeat !important;
background-position: left center;
}

 

arod




msg:3707200
 12:58 pm on Jul 25, 2008 (gmt 0)

Okay, here's some sweet ascii art to exhibit what's happening...

Internet Explorer:

--------------
l ********** l
l ******* l --
l ******* l **
l ******* l **
l ******* l **
l ******* l **
l ******* l **
l ******* l --
l ********** l
l ********** l
--------------

Firefox...what it's supposed to look like:

-------------
l ********* l
l ******* l -------- l
l ******* l ******** l
l ******* l ******** l
l ******* l ******** l
l ******* l ******** l
l ******* l ******** l
l ******* l----------l
l ********* l
l ********* l
-------------

dragon master mokuba




msg:3708462
 3:39 am on Jul 27, 2008 (gmt 0)

I had a problem like this except IE made my dropdown look like this (where most of the secondary level was behind the rest of them, except the top of the menu lol):


-------------
l ********* l
l ******* l -------- l
l ******* l ******** l
l ********* l******* l
l ********* l******* l
l ********* l******* l
l ********* l******* l
l ********* l--------l
l ********* l
l ********* l
-------------

also, i couldnt get the dropdowns to work in IE (as in, they didnt even drop down at all) with the code you posted. worked fine in FF however.

*edit*
NM i got it to dropdown in IE, just had to put the proper tags in (html, head, body). I still havent found out whats wrong though

g1smd




msg:3708540
 10:15 am on Jul 27, 2008 (gmt 0)

I don't see a style for:

div ul li ul { ... }

which is how I would have tackled it, by specifying the "path" to the element.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved