Jump to content
Killersites Forums

Recommended Posts

I got this from the net.

Can anyone tell me why it isn't working?

 

 

<div id=”nav”>

<ul>

<li class=”first”><a href=”#”>Home</a></li>

<li><a href=”#”>About Me</a></li>

<li><a href=”#”>Portfolio</a>

<ul>

<li><a href=”#”>Web</a></li>

<li><a href=”#”>Print</a></li>

<li><a href=”#”>Photos</a></li>

</ul>

</li>

<li><a href=”#”>Contact Me</a></li>

</ul>

</div>

 

 

 

 

*{ margin:0px; padding: 0px; }

 

#nav {

font-family: arial, sans-serif;

position: relative;

width: 390px;

height:56px;

font-size:14px;

color:#999;

margin: 0px auto;

}

 

#nav ul {

list-style-type: none;

}

 

#nav ul li {

float: left;

position: relative;

}

 

#nav ul li a {

text-align: center;

border-right:1px solid #e9e9e9;

padding:20px;

display:block;

text-decoration:none;

color:#999;

}

 

#nav ul li ul {

display: none

}

 

#nav ul li:hover ul {

display: block;

position: absolute;

}

 

#nav ul li:hover ul li a {

display:block;

background:#12aeef;

color:#ffffff;

width: 110px;

text-align: center;

border-bottom: 1px solid #f2f2f2;

border-right: none;

}

 

#nav ul li:hover ul li a:hover {

background:#6dc7ec;

color:#fff;

Link to post
Share on other sites

Make *{ margin:0px; padding: 0px; } to * { margin:0px; padding: 0px; }

 

Both look the same to me - what am I missing?

 

Btw - when it's '0' - no unit of measure is required, zero is zero px as em as cm as % as whatever, so this:

 

 

* {margin: 0; padding: 0;} is all you need.

Link to post
Share on other sites

Try

* { margin 0 auto; padding: 0 0; }

 

The '*' is a universal selector and that code would apply the auto right/left margin to EVERYTHING - that's probably not very practical overall. Also, there's no need to have two zeros for the padding. If you have one value, it applies to all four sides. If there are two, the first will be for top/bottom, the second for right/left. Since both have the same value in your example, the second zero is redundant.

Link to post
Share on other sites

I just can't get the drop down to work.

I've been struggling with these navbars for a while now.

I'm curious what everyone else is doing?

The spry bars are easy but haven't had luck manipulating them

the way I want. I want them to center and separated from each other.

I'm going to work on that today. I loaded a plug-in to help manipulate

spry bars I guess I'll go back to that, unless someone else has a better idea.

Link to post
Share on other sites

Your issue is this section of code:

 

<div id=”nav”>
<ul>
<li class=”first”><a href=”#”>Home</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Portfolio</a>
<ul>
<li><a href=”#”>Web</a></li>
<li><a href=”#”>Print</a></li>
<li><a href=”#”>Photos</a></li>
</ul>
</li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</div>

Specifically, the quotation marks are not the standard vertical quotation marks (") found on a normal keyboard but the slightly slanted (typographically correct) quotation marks (”). Most likely, you copied/pasted this code from a blog that automatically converts the vertical style quotes to the other style (Wordpress does this automatically), and didn't realize you needed to fix that. Replacing the quotation marks with the standard vertical style marks will fix your issue, and the dropdown will work normally. I just tested this, and it does work.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...