ok, so i promise i have been trying EVERYTHING suggested and things just don't seem to work. and so yes, i have kept fiddling, but for some reason, it seems to look better and better, and right now i really have one issue, and thats that my submenu is in a fixed position on the left side, rather then showing up directly under its tab.
here is the css... (yes i know it is probably full of wrong things, but hey, it almost totally works!)
Code:
#nav{
width: 100%;
display: inline-block;
text-align: right;
float: right;
margin: 0;
padding: 0;
}
#nav ul {
position: absolute;
left: 22%;
top: 28%;
}
#nav ul ul{
display: none;
}
#nav ul li{
display: inline-block;
height: 62px;
}
#nav ul li a{
padding: 15px;
background: orange;
color: white;
border: solid;
}
#nav ul li a:hover{
text-decoration: none;
background-color: #ffb424;
box-shadow: 0px 4px 5px #666;
}
#nav ul li ul {
display: none;
position: fixed;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
#nav ul li ul li a {
padding: 10px;
display: inline-block;
background: #688A08;
color: white;
}
#nav ul li:hover ul {
display: inline-block;
}
#nav ul li:hover li {
display: inline-block;
}
and here is the html...(i'm including everything incase i looked over something)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- your webpage info goes here -->
<title>Chicago Unification Church</title>
<meta name="author" content="your name" />
<meta name="description" content="" />
<!-- you should always add your stylesheet (css) in the head tag so that it starts loading before the page html is being displayed -->
<link rel="stylesheet" href="ucchicago.css" type="text/css" />
</head>
<body>
<!-- webpage content goes here in the body -->
<div id="page">
<div id="logo">
<img src="images/uclogo.png">
<div id="nav">
<ul>
<li><a href="#/home.html">Home</a><ul><li></li></ul>
<li><a href="#/about.html">About Us</a>
<ul>
<li><a href="beliefs.html">Our Beliefs</a> </li>
<li><a href="vision.html">Our Vision</a> </li>
<li><a href="pastors.html">Our Pastors</a> </li>
<li><a href="staff.html">Our Staff</a> </li>
<li><a href="newhere.html">New Here?</a> </li>
</ul>
<li><a href="#/about.html">Ministries</a>
<ul>
<li><a href="blessedlife.html">BlessedLife</a> </li>
<li><a href="familylife.html">FamilyLife</a> </li>
<li><a href="kidslife.html">KidsLife</a> </li>
<li><a href="yalife.html">YoungAdultLife</a> </li>
<li><a href="careteam.html">Our Care Team</a> </li>
</ul>
<li><a href="#/contact.html">Media</a>
<ul>
<li><a href="messages.html">Messages</a> </li>
<li><a href="gallery.html">Gallery</a> </li>
</ul>
<li><a href="#/home.html">Contribute</a>
<ul>
<li><a href="volunteer.html">Volunteer</a> </li>
<li><a href="donate.html">Donate</a> </li>
</ul>
<li><a href="#/contact.html">Connect</a>
<ul>
<li><a href="service.html">Sunday Service</a> </li>
<li><a href="midweek.html">Midweek Experience</a> </li>
<li><a href="smallgroups.html">Small Groups</a> </li>
<li><a href="calendar.html">Our Calendar</a> </li>
<li><a href="contactus.html">Contact Us</a> </li>
</ul>
</ul>
</div>
<div id="content">
<h2>Home</h2>
<p>
This is where upcoming events will go
</p>
</div>
<center>
<div id="cal">
<p>
<a href="https://www.google.com/calendar/embed?src=lovinlifechicago%40gmail.com&ctz=America/New_York"><img src="images/calendar.png"></a>
</p>
</div>
<div id="map">
<p>
<a href="https://maps.google.com/maps?hl=en&q=1443+west+schaumburg+road,+schaumburg,+il&ie=UTF-8&hq=&hnear=0x880fa8e3b671da37:0xc68502963d6ebee6,1443+W+Schaumburg+Rd,+Schaumburg,+IL+60193&gl=us&daddr=1443+W+Schaumburg+Rd,+Schaumburg,+IL+60193&ei=8QLtUMa-OYKGqgHc9IAY&sqi=2&ved=0CDMQwwUwAA"><img src="images/map.png"></a>
</p>
</div>
<div id="other">
<p>
<a href="http://www.ucchicago.org"><img src="images/church.png"></a>
</p>
</div>
</center>
<div id="footer">
<p>
1443 West Schaumburg Rd. Schaumburg, Il | Webpage made by <a href="/" target="_blank">[Sarah and Kuni]</a>
</p>
</div>
</div>
</body>
</html>
sorry i have so much trouble with this.. you guys are all really nice! and if it still doesn't work after all this, i'll leave you alone lol