CSS Problem Overflow menu

HTML & CSS
1

HI Guys,

Please I need some help!! I m struggling with the overflow tag on my navigation…

the navigation work fine in mozilla, but not in IE 5 & 6… the box of my navigation expand…I try different hacks like to put overflow:relative to the container…but still not work!!

many thanks
red

here the html code:

<div id=“nav”>

<ul id=“navigation”>
<li class=“selected”><a href=“default.html”>Home</a></li>
<li><a href=“branding.html”>Portfolio</a></li>

	&lt;li &gt;&lt;a href="what.html"&gt;What we do&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="clients.html"&gt;Clients&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="contacts.html"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</div>

HERE IS THE CSS:
a img {
border:0;
}

img {
border:0;
float: left;
}

html, body {
background-color:#232323;
margin: 0;
padding: 0;
}

#container {
margin:0 auto;
width:1000px;

}

#nav {
height:25px;
background-color:#FFC807;
width: 380px;
float:left;

}

#navigation {
position:relative;
z-index:999;
overflow:visible;
margin:44px auto 0;
padding:0;
width:380px;
height:25px;
}

#navigation li {
position:relative;
top:-70px;
left:15px;
float:left;
margin:0 16px 0 0;
list-style:none;
font-weight:bold;
}

#navigation li a {
display:block;
height:75px;
color:#231f20;
font-size:15px;
line-height:75px;
letter-spacing:-0.03em;
text-decoration:none;
}

#navigation li.selected a {
color:#fff;
}

#navigation li a:hover,
#navigation li a:focus {
color:#fff;
}

2

Hi, for one thing, drop IE5

Second, to restrict something to it’s width put overflow:hidden on it.

If you need the children to be able to still be seen, give the child(ren) position:relative (to make this work the parent that has overflow CANNOT have postion:relative. Be aware of that)

Just looked at your code…you set the nav to be 25px height but then you set the anchors to 75px height…?

3

Thanks now it works… very helpfull :slight_smile:

4

You’re welcome :)_.