• Locked
1 reply [Last post]
Sun, 2011-12-18 22:37
JMDavis
Offline
Last seen: 1 year 22 weeks ago
newbie
Timezone: GMT-5
Joined: 2011-12-18
Posts: 1
Points: 2

I am having a hard time figuring out what the problem is. My sub-nav is not lining up with my Main nav. I have tried adjusting numerous properties and values. Nothing has worked.

HTML:

<!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">
 
<head>
<title>Horizontal Nav</title>
	<meta http-equiv="content-type" 	
 
content="text/html;charset=utf-8"/>
 
<style type="text/css" media="all"> @import 
 
"navigation.css";</style>
 
 
</head>
 
<body>
 
<div id="nav">
	<ul id="navlist">
 
	<li><a href="index.html">Hotel</a>
<ul>
<li><a href="rooms.html">Rooms</a></li>
</ul>
	</li>
 
	<li><a href="activities.html">Activities</a>
<ul>
<li><a href="off_the_resort.html">Off the Resort</a></li>
</ul>
	</li>			
 
 
	<li><a href="entertainment.html">
		Entertainment</a>
<ul>
<li><a href="riu_staff.html">Riu Staff Entertainment</a></li>
</ul>
	</li>
 
	<li><a href="gallery.html">Photo Gallery</a>
<ul>
<li><a href="video.html">Video Archive</a></li>
</ul>
	</li>
 
	<li><a href="trip.html">Book your Trip</a></li>
 
	</ul>
</div>
 
</body>
 
</html>

CSS:

#nav
 {
width: 100%;
font-family:Verdana, sans-serif;
text-align:right;
}
 
#navlist
{
margin:auto;
text-align:center;
width:60%;
}
#navlist li
{
list-style: none;
}
#navlist li a
{
text-decoration: underline;
list-style: none;
display:inline-block;
float:left;
min-width:150px;
text-align:center;
background-color:#A66E29;
color:#6DA7F2;
margin:0px;
padding: .5em;
border:3px solid #3D8BF2;
margin-bottom:-1px;
position: relative;
}
 
#navlist li a.current
{
border-bottom:3px solid #3D8BF2;
background-color:#6DA7F2;
}
 
#navlist li a:hover
{
background-color:#F2C744;
}
 
#navlist li ul
{
margin: 20px;
padding: 0px;
display: none;
position:absolute;
top:20px;
background-color:#A66E29;
border:3px solid #3D8BF2;
color:#6DA7F2;
text-align:center;
}
 
#navlist li:hover ul
{
margin: 20px;
display: inline-block;
min-width: 150px;
background-color:#F2C744;
}
 
#navlist li li
{
list-style: none;
display: list-item;
}

If anyone can help my figure this out, I'd appreciate it.

Top
Tags:
Mon, 2011-12-19 02:33
#1
Tyssen
Tyssen's picture
Offline
Last seen: 2 weeks 5 days ago
Moderator
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need position:relative on #navlist li

The text-align: center might also be throwing aligment out.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Top
  • Locked