13 replies [Last post]
julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

:ohdear: :ohdear: Hi there... I am not sure if this is a beginner question or not. I have a friend that wants me to help them out with the menu on their site.

here is the link of the template they bought. http://uniquedealz.com/2020/

Under the "Product" I need to add 4 items then under one of those items/links I am adding 20 more items/links.

I found out in the source code I need to use the ul code to create the actual names of the links but I am getting confused with the css class part.

Any help would be great.

Thank you
Julie

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 11 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Do you mean you want a drop

Do you mean you want a drop down navigation?

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

Hi lj, thank you for

Hi lj, thank you for responding. Yes I want it to drop down. I did the "ul" code in the source file but all it did was make a new menu about an inch below the main menu.

I have looked at tutorials. I think I need to do some changes in my style.css file or the layout.css but not sure what to do.

Thank you so much
Julie

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 11 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Below I will paste the CSS

Below I will paste the CSS for the basis of a drop-down nav:

#mynav ul, #mynav li {
list-style:none
margin:0;
padding:0
}
 
#mynav ul li {
float:left;
}
 
#mynav ul li a {
padding:5px 15px
}
 
#mynav ul li ul {
visibility:hidden
}
 
#mynav ul li:hover ul {
visibility:visible
}
 
#mynav ul li:hover ul li {
float:none
}

So you wrap up your nav within

and then it goes like:

/*toplevel*/

  • Products
    /*secondlevel*/
    • 1st Product
    • 2nd Product

And so on...

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

hi LJ

Thank you...but my problem is when I implement what your doing with the existing code, it messes up the page. here is my style.css code and layout.css code. Maybe you ca direct me on what to do.

css.style source

}
ul, ol {
	list-style: none;
}
 
<span style="font-weight:bold">(then further down)
</span>
 
}
#header {
	background: url(images/header.jpg) no-repeat 0% 156px;
	position: relative;
	height: 442px;
}
#header ul {
	height: 43px;
	position: absolute;
	top: 113px;
	left: 0;
}
#header ul li {
	float: left;
	font-size: 1.25em;
}
#header ul li a {
	display: block;
	padding: 0 30px 0 30px;
	float: left;
	line-height: 43px;
	text-decoration: none;
	color: #035487;
}
#header ul li a:hover {
	background: url(images/menu-act.gif) repeat-x 0% 0%;
	color: #fff;
}
#header ul li#act a {
	background: url(images/menu-act.gif) repeat-x 0% 0%;
	color: #fff;
}

here is the page http://uniquedealz.com/2020

thank you ever so much for taking the time out

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 11 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

You haven't added the

You haven't added the second level in:

you need #header ul li ul {
visibility:hidden;
}

#header ul li ul li {
float:none
}

#header ul li:hover ul {
visibility:visible
}

That is the basics, you will need to add your width's and background colors etc to the second level.

you also need to remove float:left from your a's as your li's are floating (#header ul li a)

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

Hi there, I did what you

Hi there, I did what you said.. and it is atleast in a column...

http://uniquedealz.com/2020

when I mouse over 'product' it brings up submenu but over to left and that doesnt work...I know i am not doing something right. Here is what I did...

}
#header {
	background: url(images/header.jpg) no-repeat 0% 156px;
	position: relative;
	height: 442px;
}
#header ul {
	height: 43px;
	position: absolute;
	top: 113px;
	left: 0;
}
#header ul li {
	float: left;
	font-size: 1.25em;
}
#header ul li a {
	display: block;
	padding: 0 30px 0 30px;
	float: none;
	line-height: 43px;
	text-decoration: none;
	color: #035487;
}
#header ul li a:hover {
	background: url(images/menu-act.gif) repeat-x 0% 0%;
	color: #fff;
}
#header ul li#act a {
	background: url(images/menu-act.gif) repeat-x 0% 0%;
	color: #fff;
}
 
#header ul li ul {
visibility:hidden;
}
 
#header ul li ul li {
float:none
}
 
#header ul li:hover ul {
visibility:visible
 
}

thank you so much!

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 11 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

It is because you have your

It is because you have your top level ul (#header ul) absolutely positioned, this is affecting the second level, as it is still a ul within the #header element.

There are 2 ways to fix this:

1 (the best): Remove the absolute positioning from the top level ul, and position it by setting the width of your #header to the width you want the ul to be and using margin:0 auto, you should not need absolute positioning. Note: please add text-align:center to the body element, and margin:0;padding:0 to the ul, ol {} at the top of your stylesheet for this solution to work

2: (the worst) add positioning (relative or absolute) or margins to your second level ul (#header ul li ul} to bring it over.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

Okay LIam... I will try

Okay LIam... I will try that... as you can tell I am a n00b...Smile

thank you

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

Well the whole menu moves to

Well the whole menu moves to the top...lol http://uniquedealz.com/2020/ I am so sorry. here is the code now

}
#header {
	background: url(images/header.jpg) no-repeat 0% 156px;
	position: relative;
	height: 442px;
}
#header ul {
	height: 43px;
	margin:0 auto;
	top: 113px;
	left: 0;
}
#header ul li {
	float: left;
	font-size: 1.25em;
}
#header ul li a {
	display: block;
	padding: 0 30px 0 30px;
	float: none;
	line-height: 43px;
	text-decoration: none;
	color: #035487;
}
#header ul li a:hover {
	background: url(images/menu-act.gif) repeat-x 0% 0%;
	color: #fff;
}
#header ul li#act a {
	background: url(images/menu-act.gif) repeat-x 0% 0%;
	color: #fff;
}
 
#header ul li ul {
visibility:hidden;
}
 
#header ul li ul li {
float:none
}
 
#header ul li:hover ul {
visibility:visible
 
}
#header ul li ul {
visibility:hidden;
}
 
#header ul li ul li {
float:none
}
 
#header ul li:hover ul {
visibility:visible
}

thank u

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

Just added the body and ul

Just added the body and ul ol thing

}
ul, ol {
	list-style: none;
	margin:0;
	padding:0;

body {
	background: #001b34 url(images/body-tail.gif) repeat-y 50% 0%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1em;
	color: #393939;
	text-align:center;

I changed size of font to sub layer and that looks better in how the top menu lays on the page. the menu needs to go down in the white area....

thank you so much

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

Its really wierd because in

Its really wierd because in Firefix the menu looks ok except it is at the top of the page and in IE brower it is messed up..... strange

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 11 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Okay, looks like you do need

Okay, looks like you do need the absolute positioning, because of the way it has been done.

so, you will need to wrap your whole ul menu inside a new div id (

Then remove all positioning attributes from all the uls within #header

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

julieb
julieb's picture
Offline
Regular
Redlands, CA
Last seen: 12 years 19 weeks ago
Redlands, CA
Timezone: GMT-7
Joined: 2009-09-04
Posts: 12
Points: 0

I was fooling around and

I was fooling around and added position back but made it..position:inherit

and it's fixed...Smile

thank you so much for your help....

In IE browser now it is straight across but the menu is still at top. Looking around.

http://uniquedealz.com/2020

I know its getting late for you in Sweden...huggz