drop down menu-help for class!

Hi, guy! I'm really new to the CSS world, and I have class website due on Monday. I realize it's short notice, but I'm pulling my hair out here.
Okay, so. I need to have a horizontal navigation bar with a transitional element. I've figured this out. What I can't figure out is how to make a vertical drop down menu from one ("Profiles") link/list item in the horizontal menu.
Here is my HTML:

Navigation help for class

Hi, guys! I'm really new to the CSS world, and I have class website due on Monday. I realize it's short notice, but I'm pulling my hair out here.
Okay, so. I need to have a horizontal navigation bar with a transitional element. I've figured this out. What I can't figure out is how to make a vertical drop down menu from one ("Profiles") link/list item in the horizontal menu.

CSS Dropdown Menu Alignment

I am having trouble aligning this drop down menu I created. The drop down menu won't align with the main menu correctly. Please help me align it properly.

Here is my CSS:

li {
display:inline;
padding-left:30px;
padding-right:30px;
}
ul {
list-style: none;
text-align:center;
}
ul li {
display: inline-block;
}
ul li a {
color: 000000;
text-decoration: none;
font-size: 24px;
text-align:left;
}
ul li ul {
display: none;
position: absolute;
}
ul li:hover ul {
display:block;
background-color: transparent;
position:absolute;
text-align:center;
}
ul a:hover {

CSS Transitions, overflow:hidden issue in a dropdown menu preventing next level submenu from showing

First post so bear with me. I have a multilevel dropdown menu and have added a height transition to give the dropdown a cool scroll effect. Problem is that for some reason the transition only works properly if the overflow on the hidden ul is also hidden. this wouldn't be a problem if I didn't have yet another level of submenu. With overflow:hidden; on the parent ul, you can't see the nested ul that is offset to the right exactly the width of the parent. If I make overflow:visible; in the hover rule-set, then I lose the beginning transition and only get the effect when stop hovering.

drop down menu problems!

ok, so i honestly don't know what i'm doing with drop down menus. i somehow just can't figure out how to do it right.
but just from messing around i got pretty close to what i want. only issue is the sub menu drops down in a fixed place on the far left of the menu rather then directly under its respective tab

please help me!
for the html, the website it www.ucchicago.org
here is the css...

#nav{
	width: 100%;
	display: inline-block;
	text-align: right;
	float: right;
	  margin: 0;
	padding: 0;
 
}
 
#nav ul {

Syndicate content