I need overflow: hidden but cannot use it :(

[charlee]

I am finishing the design of a webpage but i didnt notice that the menubar in the top i was using was not gonna be able to display the submenus and this is all because the css rule sais overflow:hidden but if i change this, then the whole design will be affected, dont know exactly what to do because this element containing the menuBar is inside the header divission and then i have a container divission being pushed for the header to its position so none of then is floated they just follow the normal flow of the page. I have a side bar which is floated to the left and thats about it. this is the page <> take a look at the menu bar in the top and you will see that the element "outils" doesnt show the submenu because the overflow is hidden. I need somehelp to know how can i just have a normal overflow but still keep the same design.

thanks in advance.

-Im using spryte DreamWeaver CS3 to generate the top menu bar-

[edited by: SuzyUK at 5:13 pm (utc) on April 21, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

[charlee]

Sorry for posting a link in my post, I didnt know of course I was not allowed to, and by the way I think is a very good policy. So here is the thing :)

this is the XHTML CODE

-----------------------------------------
<div id="container">
  <div id="header">
   <div id="banner"> --------- </div>
 
   <div id="menuBarH">  //HERE IS THE PROBLEM, THE SUBMENU DOESNT SHOW
   <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">4</a>
     <ul>
      <a href="#">4.1</a>
      <a href="#">4.2</a>
      <a href="#">4.3</a> 
     </ul>   
    </li>
   </ul>
  <!-- end #menuBarH --></div>
  <!-- end #header --></div>
 
  <div id="sidebar1">
<ul id="MenuBar2" class="MenuBarVertical">
 <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
</ul>
 <!-- end #sidebar1 --></div>
 <div id="mainContent">
 <!-- end #mainContent --></div>
 <div id="footer">
 <!-- end #footer --></div>
<!-- end #container --></div>

-----------------------------------------

THIS IS THE CSS COMMON.CSS

-----------------------------------------

body {
font: 90% Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
text-align: right;
}

.common #header {
background: #DDDDDD;
padding: 0px;
background-color: #5A7296;
}

.common #banner {
float: right;
}

.common #menuBarH {
float: none;
clear: both;
width: 100%;
overflow: hidden; // ?
}

.common #sidebar1 {
float: left;
width: 12.7em;
padding: 0px;
height: 50em;
}

.common #mainContent {
margin: 1em 1.5em 1em 14em;
}

------------------------------------------
THIS IS THE CSS FOR THE MENUBARHORIZONTAL.CSS
-------------------------------------------

ul.MenuBarHorizontal
{
margin: 0 0 0 0;
padding: 0;
list-style-type: none;
font-size: 90%;
width: auto;
float: right;
}
------------------------------------------------

Just wanned to say again that this menu bar is generated by spryte in DW CS3 so it has tones of css rules but this is the most important one cause is the wrapper of the whole menu, im sure the rest of the rules are completly safe to my specific example.

Sorry again for posting a link :(

[SuzyUK]

hi charlee

that code is not chopping the menu. but at a guess I'd say you don't need overflow:hidden.. if you want to contain floated li elements in that menubar:

.common #menuBarH {
float: left;
clear: both;
width: 100%;
/* overflow: hidden; /****/
background: #cfc;
}

float it instead, a floated parent also stretches to contain its floated children, which I presume is what you need overflow: hidden for?

if not give a shout back with some more detail

-Suzy

[charlee]

yep it does, cause is not the list what is having the problem but the <ul> inside one of the li elements of my list, this <ul> is hidden and controlled by js and DOM so when u first open the page u dont see it, youll just see it when you move the cursor over it, but since the menuBarH has an overflow:hidden then this subelement doesnt show when i move the mouse over it. I already tried float:left and when i do this the menu bar goes to the top of the page and loses its current position. :(, may i post a link to an image where u can see the right distribution of my page?