Jump to content

containing div of navigation bar overflow:hidden, hides dropdown menu.how 2 fix?

shortysbest

By shortysbest
in CSS Help

Recommended Posts

shortysbest Advanced Member

shortysbest

Posted
Posted

I need a navigation bar with overflow:hidden to have the background of navigation bar, and the borders where i want them, however without the overflow:hidden it is just a few pixels height and doesn't wrap around the bar, but with the overflow:hidden it hides the dropdown, how can i get around this?

shortysbest Advanced Member

shortysbest

Posted
  • Author
Posted

This example would show what i mean. Currently with the way it is now the dropdown will not show. however if you remove the line i commented next to it works.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dropdown Menu Structure</title>
</head>
<style>
ul.navigation
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*REMOVE THIS OVERFLOW:HIDDEN AND IT SHOWS THE DROPDOWN,CHANGING IT TO AUTO DIDNT FIX IT*/
background-color: #CCC;
}

ul.navigation li ul li { 
float: none;
margin: 0px;
padding: 0px;
font-size: 11px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #DDD;
}
ul.navigation li a 
{
display: block;
text-decoration: none;
color: #333;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
background-color: #DBDBDB;
}

ul.navigation li 
{
display: block;
position: relative;
float: left;
border: 1px solid #CCC;
margin-right: 15px;
}
ul.navigation li ul
{
padding: 0;
display: none;
margin-top: 0;
margin-right: -1;
margin-bottom: 0;
margin-left: -1;
position: absolute;
width: 100%;
overflow: hidden;
margin-right: -1px;
margin-left: -1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;

}
ul.navigation li:hover ul 
{
display: block;
}
ul.navigation li:hover a 
{
background-color: #F5F5F5;
}
ul.navigation li:hover li a:hover 
{
background-color: #39F;
color: #FFF;
}
</style>
<body>

<ul class="navigation"> 
  <li><a href="">No Dropdown</a></li> 
  <li><a href="">Dropdown Menu</a> 
    <ul>
    <li><a href="">Dropdown 1</a></li>
    <li><a href="">Dropdown 2</a></li>
    <li><a href="">Dropdown 3</a></li>
    </ul>
  </li>

</ul> 
</body>
</html>

shortysbest Advanced Member

shortysbest

Posted
  • Author
Posted

Well no, I was saying that the dropdown menu shows when i remove that line of code, however when i remove that code it doesn't show the background of the navigation bar, which I want it to do. So when I have that line in place, the dropdown menu shows, but the background of the navigation bar does not, and when I do not have that line of code there, the background shows but the dropdown menu doesn't. I need for both to work at the same time.

haku Regular Member

haku

Posted
Posted

You have three issues:

1) The <style> should be inside the head of your document. You have it between the head and the body. This is invalid.

2) You are missing the required 'type' attribute of your <style> tag. It should look like: <style type="text/css">

3) Change overflow:hidden to overflow:auto.

 

This should fix your problem.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.