Jump to content
Sign in to follow this  
gebraset

Drop Down Menu

Recommended Posts

Rebuilding my site right now, that I just started, lol. :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. :mellow:

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Edited by SpeedCrazy

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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. :whoa:

 

-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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by SpeedCrazy

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :ouch:

Share this post


Link to post
Share on other sites

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. :D

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

Edited by SpeedCrazy

Share this post


Link to post
Share on other sites

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 by flareback

Share this post


Link to post
Share on other sites

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.

Share this post


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.

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.

Sign in to follow this  

×
×
  • Create New...