New Topic/Question
Reply
CSS
/*This is going to be the main CSS sheet for MarkUp1. Create the header to be inserted automatically when linking the external sheet. DivId="Nav1"*/
/*By James McGovern -- For NKDC -- 3/22/10*/
#head
{
margin-left: 20%;
margin-right: 20%;
}
#nav ul
{
position:absolute;
width:250px;
}
#nav li
{
list-style:none;
display:inline;
}
#nav a
{
padding:5px 15px;
}
#nav a:link /*,a:visited*/
{
width:250px;
font-weight:bold;
color:#FFF;
background:#00F;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#nav a:hover
{
color:#00F;
background:#FFF;
text-decoration:underline;
}
#nav2 a:hover
{
color:#FFF;
background:#0FF;
text-decoration:underline;
height=40px;
}
/*#nav a:active{
margin-top:2px;
color:#FFF;
background-color:#00F;
}*/
HTML
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<div id="head">
<img src="images\header.jpg">
</div>
</head>
<body>
<ul id="nav">
<li><a href="mu1.mypage.com/index.htm">Home</a></li>
<li><a href="mu1.mypage.com/about">About</a></li>
<div id="nav2">
<li><a href="text">Hi</a></li>
</div>
<li><a href="mu1.mypage.com/programs">Programs</a></li>
<li><a href="mu1.mypage.com/contact">Contact Us</a></li>
<li><a href="mu1.mypage.com/Tuition">Tuition</a></li>
</ul>
</html>
The base layer works fine but I'm trying to code it so when a button is moused-over a secondary, vertical menu appears. In this case I see the secondary menu all the time. Also I am having an issue with the positioning. I read about it on w3schools and this is what i tried
MORE CSS
#nav
{
position:absolute;
top:100px;
left:100px;
}
From what I gather that should tell the div where to start from the top and the left of the page. But when I use it, it doesn't seem to function correctly. Is there something I'm missing with this element?
Thanks in advance!!
This post has been edited by guyfromri: 22 March 2010 - 09:00 AM
MultiQuote
| 