Jump to content

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

shortysbest

By shortysbest
in CSS Help

 Share

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.