3 Replies - 816 Views - Last Post: 23 March 2010 - 08:12 AM

#1 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 817
  • Joined: 16-September 09

CSS Nav Menu

Posted 22 March 2010 - 08:59 AM

So I am trying to create, what I believe to be, a pretty basic navigation menu. It's new to me so bear with but from what I've read these can have layers upon layers. I'm going to list what I have so far but my first question would be, would this be more efficient for me if I used php or javascript to create? Here's what I have so far

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


Is This A Good Question/Topic? 0
  • +

Replies To: CSS Nav Menu

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: CSS Nav Menu

Posted 22 March 2010 - 09:42 AM

First off - get rid of the <div id="nav2"> - you should use nested <ul>'s, like so:


<ul>
<li>
   <ul id="nav2"></ul>
</li>
</ul>




No - I would say this is the best way to create a basic menu as long as you aren't using any dynamic content.

--

Greg
Was This Post Helpful? 1
  • +
  • -

#3 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 817
  • Joined: 16-September 09

Re: CSS Nav Menu

Posted 22 March 2010 - 11:37 AM

View Postgregwhitworth, on 22 March 2010 - 08:42 AM, said:

First off - get rid of the <div id="nav2"> - you should use nested <ul>'s, like so:


<ul>
<li>
   <ul id="nav2"></ul>
</li>
</ul>




No - I would say this is the best way to create a basic menu as long as you aren't using any dynamic content.

--

Greg


Thank you very very much. Now that i'm looking at this it makes sense to me. Very much appreciated
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: CSS Nav Menu

Posted 23 March 2010 - 08:12 AM

No problem, that's how coding goes - you root and root and when you find the solution it makes so much sense you wonder why you never thought of it.

--

Greg
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1