vertical menu

[hwoarang69]

the problem is that my menu is print 1.1 and 1.2 in same line but i want them to be vertical

---------------------------------------
|  1   |     2   |     3    |    4    |
|------|---------|----------|---------|   
-------------
| 1.1  | 1.2|
-------------


so for ex this is that i want



   ---------------------------------------
    |  1   |     2   |     3    |    4    |
    |------|---------|----------|---------|   
    --------
    | 1.1  |
    --------
    | 1.2  |
    --------










html file
<div id = 'bottom_menu_wrapper'>
            <ul>
                <li><a href='#'>gender</a>
                    <ul>
                        <li><a href='#'>Female</a></li>
                        <li><a href='#'>Male</a></li>
                    </ul>
                </li>

                <li><a href='#'>Home Decor</a>
                    <ul>
                        <li><a href='#'>Furniture</a></li>
                        <li><a href='#'>Home Accessories</a></li>
                    </ul>
                </li>

                <li><a href='#'>Beauty</a>
                    <ul>
                        <li><a href='#'>Bath and Body</a></li>
                        <li><a href='#'>Hair Care</a></li>
                    </ul>
                </li>

                <li><a href='#'>Gourmet Food</a>
                    <ul>
                        <li><a href='#'>Specialty Items</a></li>
                        <li><a href='#'>Sweets</a></li>
                    </ul>
                </li>
        </div>

csss file

#bottom_menu_wrapper ul {
padding:0px;
margin:0px;
width:420px;
list-style:none;
position:relative
}

#bottom_menu_wrapper ul ul {
position:absolute;
left:0;
top:100%;
display:none;
padding:0px;
margin:0px
}

#bottom_menu_wrapper ul li {
display:inline;
float:left;
position:relative
}

#bottom_menu_wrapper ul a {
text-decoration:none;
padding:10px 0px;
width:100px;
background:#666666;
color:#ffffff;
float:left;
text-align:center;
border:1px solid #ffffff;
}

#bottom_menu_wrapper ul a:hover {
background:#cccccc;
color:#333333
}

#bottom_menu_wrapper ul li:hover ul {
display:block;
}

#bottom_menu_wrapper ul ul a {
width:150px;
}

#bottom_menu_wrapper ul ul li {

margin:0px
}

[<M/>]

Have you ever googled a solution?

[<M/>]

Here is an example...
http://www.devinrolsen.com/pure-css-horizontal-menu/

Try following it, you will catch the error

[<M/>]

I found that link with one google search btw...

[hwoarang69]

already tried it didnt work.

[<M/>]

Well, what have you tried... I will make some time to create this for you (just not this instance...)

[<M/>]

Can you show me what you have tried?

[<M/>]

Okay.... I hope you have noted this about your code... But you are missing semi colons

[<M/>]

Notice in your CSS... You forget semi colons after almost every single place it requires semi colons.

[<M/>]

Please tell me if that solves your issue

[JorgeM]

I have a sample that you are free to use and adapt to your needs. You can create second and third levels if needed.

I use this same navigation menu on my site. It has worked well for me. CSS Nav Menu.

http://www.itgeared.com/articles/1420-css-multi-level-navigation-menu-tutorial/

[hwoarang69]

i fixed the colons. still no change

[hwoarang69]

http://www.itgeared.com/articles/1420-css-multi-level-navigation-menu-tutorial/

code that iam using for my menu is from same site.
but for some reason my doesnt really do the same thing. i think i might be missed a line what is case this problem.

[<M/>]

show me what you have as of so far.

[hwoarang69]

show me what you have as of so far.

i put in my post at up. that all i have so far

[<M/>]

I will make time to rebuild it for you

[<M/>]

Alright I finished this menu for you. Here you go:

HTML

<ul id="navbar">

  <li><a href="#">Gender</a>
     <ul>
       <li><a href="#">Male</a></li>
       <li><a href="#">Female</a></li>
     </ul>
  </li>

  <li><a href="#">Home Decor</a>
    <ul>
      <li><a href="#">Furniture</a></li>
      <li><a href="#">Home Accessories</a></li>
    </ul>
  </li>


  <li><a href="#">Beauty</a>
    <ul>
      <li><a href="#">Bath and Body</a></li>
      <li><a href="#">Hair Care</a></li>
    </ul>
  </li>


  <li><a href="#">Gourmet Food</a>
    <ul>
      <li><a href="#">Specialty Items</a></li>
      <li><a href="#">Sweets</a></li>
    </ul>
  </li>

</ul>

CSS:

<style>
ul#navbar {
    padding:0px;
    margin:0px;
    width:420px;
    list-style:none;
    position:relative
}

ul#navbar ul {
    position:absolute;
    left:0;
    top:100%;
    display:none;
    padding:0px;
    margin:0px
}

ul#navbar li {
    display:inline;
    float:left;
    position:relative
}

ul#navbar a {
    text-decoration:none;
    padding:10px 0px;
    width:100px;
    background:#666666;
    color:#ffffff;
    float:left;
    text-align:center;
    border:1px solid #ffffff;
}

ul#navbar a:hover {
    background:#cccccc;
    color:#333333
}

ul#navbar li:hover ul {
    display:block;
}

ul#navbar ul a {
    width:150px;
}

ul#navbar ul li {
    display:block;
    margin:0px
}

</style>

Now the reason why JorgeM's code didn't work was because one of the id's wasn't done right. In his css he did ul#nav when it should be ul#navbar.

I hope this helps you and please stay away from the habit of someone else doing your work for you :)

[<M/>]

JorgeM, you should update your css file from the link you provided earlier in this thread... Read my above reply on what happened :)

[<M/>]

You may mark this solved and give points if this solutions satisfies your needs : )

[hwoarang69]

thank you, micharel. it works perfect.

[<M/>]

Your welcome :)
Remember... it's prefered not to use someone else's code, you reference them, just don't use them because you don't what mistakes/things they put in there that you don't understand!
Feel free to ask additional quesitons :)

[JorgeM]

@hwoarang69- sorry about that typo on the tutorial that I referenced. Glad that you were able to get the help needed and you are able to use it for your project.

@<MICHAEL> - thanks for catching that typo and providing the feeback.

I fixed the typo and updated the tutorial.

thanks!

[<M/>]

no problem :)