LinkedIn style menu bar

[jonathon]

Morning,

CSS is not my favourite thing but I'm alight at it (just about :d). I'm trying to build a LinkedIn style menu bar which looks like this in case you don't know.



I'm just trying to think about the logic behind it. And wanted some idea if this is the right logic.

[syntax=xhtml]
<ul>
<li><a href="">menu link</a>
<ul>
<li><a href="">sub menu</a></li>
<li><a href="">sub menu</a></li>
</ul></li>
<li><a href="">menu link</a></li>
<li><a href="">menu link</a></li>
</ul>
[/syntax]

So on the mouseover of the menu link, I want the sub menu to appear. But i'm not really sure how to make this occur, mainly because I don't know in CSS how you can get another tag (the ul tag of the sub menu) to react when hovering over a different tag (the <li> tag of the man menu bar)?

Does anybody know

Thanks in advance to anyone who can help

EDIT: Sorry I messed up my HTML tag so it didn't display

[jacek]

You can use :hover so say you had

[syntax=xhtml]<div class="button_looking_thing">
<a href="place.php">button Text</a>

<ul>
<li>The menu</li>
</ul>
</div>[/syntax]
You could make the ul appear on hover by doing

[syntax=css]div.button_looking_thing ul {
display: none;
/* positioning and other styles */
}

div.button_looking_thing:hover ul {
display: block;
}[/syntax]

[jonathon]

ahhh ok, thanks Jacek.

I'll give it a whirl - thank you

[jonathon]

Thanks for your help earlier, I'm actually pretty close to accomplishing it. I've got a couple of snags though that I hoped somebody might be able to put me straight on. I'm going to paste my HTML and CSS for closer inspection (apologies as it's fairly long for something like this)

[syntax=xhtml]<div id="menu">
<ul>
<li><a class="active" href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">This is sub</a></li>
<li><a href="#">sub menu item</a></li>
<li><a href="#">This is a long sub menu item</a></li>
</ul>
</li>
<li><a href="#">Location</a></li>
<!--REST OF MENU-->
[/syntax]
[syntax=css]
#menu {
width: 960px;
height: 40px;
margin: 0 auto;
background-image: url('images/menu.png');
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
border: 1px solid #DBDBDB;
border-bottom: 1px solid #C9C9C9;
}
#menu ul {
margin: 0;
list-style: none;
padding: 0 0 0 20px;
}
#menu ul li {
float: left;
padding: 10px 10px 13px 0;
position: relative;
z-index: 50;
}
#menu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: green;
padding: 10px;
position: relative;
z-index: 60;
}
#menu li a.active {
color: #000;
}

#menu ul li:hover { /*what happens when main tab is hovered over*/
border-top: 1px solid green;
border-left: 1px solid green;
border-right: 1px solid green;
background: #fff;
height: 18px;
position: relative;
z-index: 10;
}
#menu ul li:hover a {
padding: 10px 9px 9px 9px ;
margin: 0;
}
#menu ul li:hover .sub-menu { /*show sub menu when main menu hovered over*/
display: block;
background-color: #fff;
position: relative;
z-index: 0;
margin: 0;
padding:0 0 10px 0;
}
#menu ul li .sub-menu { /*position sub menu div*/
display: none;
background-color: white;
overflow: hidden;
position: relative;
border: 1px solid green;
top: 15px;
left: -1px;
clear:both;
z-index: 0;
}
#menu ul li .sub-menu li { /*style each sub menu option*/
clear: both;
padding: 0;
background-color: #fff;
height: 20px;
border: 0;
margin: 10px 0 0 0;
position: relative;
z-index: 0;
width: 100%;
}
#menu ul li .sub-menu li a:hover { /* background highlight of sub menu*/
background-color: #39F;
}
#menu ul li .sub-menu li a {
padding: 4px 4px 4px 4px;
margin: 0 5px 3px 5px ;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
display: block;
}[/syntax]

Basically The only 2 things I was trying to fix was that, when I hover over the main menu tab the width of that main menu piece stretches really quite wide. (As the before and after picture shows), I think that this is due to the width of the sub menu itself, which is in turn sized due to the size of the anchor text, but I can't be sure? So I wasn't sure how to stop it affecting the main tab.

The only other thing I wanted to fix was that if you look at LinkedIn's menu it looks to me that the sub menu has a border all the way round and the main menu tab has a border on all the sides but the bottom. Then it looks like the main menu tab is on top of the sub menu div and partially breaking the sub menu's top border, so you have that nice flowing border. I tried to attempt this using the z-index, but it doesn't seem to have quite worked, although I have got it to float above the main page content that sits underneath. Again, would anyone be able to lend me a hand.

Thanks in advance to anyone and Jacek for his initial help

[Curia]

setting a width value to the select box and the sub menu is one way around, but its not a very good one because it means the box will be set to that width for all header texts, so a longer word would not look very good.
A suggestion would be to look at LinkedIn's own source code for their header, not copying it, but reading it and figuring how they did it. Im on my phone atm, so i crnt be of much help sorry.

Also, i have my own dropdown menu that i made that has less code than that, and can be altered to look like what you want. Just ask and paste the code.