Drop Down Menu

[gebraset]

Rebuilding my site right now, that I just started, lol. But either way, using a prebuilt CSS template that I really like, and everything is legal before we get into that. The nav bar is very simple, and sadly, is so simple that it does not have a dropdown menu. I tried adding code, and it ended up taking the "drop down items" to the right, on the nav bar, pushing other things right.

 

HTML area

<div id="menu">

<ul>

<li><a href="#">Heading 1</a></li>

<li><a href="#">Heading 2</a>

<ul>

<li><a href="#">Subitem 1</a></li>

<li><a href="#">Subitem 2</a></li>

<li><a href="#">Subitem 3</a></li>

</ul>

</li>

<li><a href="#">Heading 3</a>

<ul>

<li><a href="#">Subitem 4</a></li>

<li><a href="#">Subitem 5</a></li>

<li><a href="#">Subitem 6</a></li>

</ul>

</li>

</ul>

</div>

 

CSS area that specifies the nav bar

#menu {

width: 950px;

height: 63px;

margin: 0 auto;

padding: 0px 0px 0px 0px;

background: url(images/img03.jpg) repeat-x left top;

}

 

CSS attempt at drop down

li ul {

display: none;

float: left;

height: 63px;

background: url(images/img05.jpg) no-repeat right top;

vertical-align: bottom;

}

li:hover > ul {

display: block;

float: left;

height: 63px;

background: url(images/img05.jpg) no-repeat right top;

}

 

So, any way to get it to go below the actual button instead? Much help would be very very appreciated, I really can't figure this out. Not that good at code.

[SpeedCrazy]

First, use the code snippet insert. Second, it should be simple, just give me a sec to load your code and see what is going wrong.

[SpeedCrazy]

IS this supposed to be horizontal or vertical?READ too wide for vertical.

Edited May 5, 2011 by SpeedCrazy

[SpeedCrazy]

Here ya go, should work fine. Change the li item width to whatever you want i just had it set at 10em as that is where i start from and work down till they fit right.

I cant test the images display positions as i dont have them but i dont see why there should be any problem.

/*format menu*/
#menu{
 width: 950px;
 height: 63px;
 margin: 0 auto;
 padding: 0px 0px 0px 0px;
 background: url(images/img03.jpg) repeat-x left top;
}
/* remove bullets */
#menu li {
 list-style-type: none;
 float: left;
 width:10em;
 text-align:center;
 background: url(images/img05.jpg) no-repeat right top;
 vertical-align: bottom;
}
/* collapse menus */
#menu li ul {
 display: none;
 background: url(images/img05.jpg) no-repeat right top;
}
/* show submenus on hover */
#menu li:hover > ul {
 display: block; 
}

any other questions?

[gebraset]

Though this fixed the problem of it going horizontal, it isn't exactly what I wanted.

 

My original site I'm redoing: http://www.cleanestvapor.com

 

The site that has the test files on it, showing the recent change that you just had me do: http://www.cleanestvapor.com/test

 

I wish I actually had lessons in this stuff and could nail it down, lol.

 

-Edit-

 

Seems like a area half way down is messed up too? Dunno, have to look at it more this weekend. But the main priority now is getting the dropdown list to work right.

[SpeedCrazy]

Okay, that happened to me when i first used horizontal drop down menus, let me see if i can remember what i did.

[SpeedCrazy]

In the CSS for #menu, put

position: absolute;

That will stop that jumping around.

 

EDIT: Just looking at your site, it says Design by CSS Templates, did you buy the template? If so they should be helping you with this, atleast the messed up content, its not their problem if you edit the menu and break it but if that object halfway down the page is broken they ought to fix it.

Edited May 5, 2011 by SpeedCrazy

[SpeedCrazy]

Okay, fixed that too, the object behing everything else was the footer wrapper, somehow it had not been correctly formatted,

In your CSS doc, under #footer-wrapper add:

clear: both;

That should fix it.

[gebraset]

Didn't buy it, the site offers free CSS design templates for royalty free use, if you follow the license and keep the link in the footer, which I am find with. I know my way around HTML and a little CSS, but designing a whole site with it was tiresome the first go around, and nowhere near the quality I was hoping for.

 

I added both changed, the the dropdown menu still isn't behaving properly.

 

Also, with the footer, it seems to help. But there is still an area there, under the picture, shown at "2." When I click on it in Dreamweaver, it's showing it in the #page tag, but not sure what it could be.

 

Dropdown menus need to be simpler.

[SpeedCrazy]

So have you put the updates in the css file? I will take another look at it. When i copied the code and made those css changes it worked properly.

EDIT: I see what you mean... gimme a while and i'll figure it out.

btw, did you just copy paste the stuff i gave you or did you consolidate it?

Edited May 5, 2011 by SpeedCrazy

[flareback]

I was just looking at your site. Did you know you have a random '2' in the gray area between "Welcome to Arrangement" and "Aliquam Tempus". Looking at the source code there is:

</div>2
<div id="sidebar">

 

Looks like the menu is still messed up? have you updated the code that speed gave you?

Edited May 5, 2011 by flareback

[gebraset]

flarback: Got the "2" fixed, I described the problem in my other post. And yes, I did update the code that Speed gave me, though just copied and pasted it into the proper areas.