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
}

Recommended Answers

All 22 Replies

Have you ever googled a solution?

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

already tried it didnt work.

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

Can you show me what you have tried?

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

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

Please tell me if that solves your issue

i fixed the colons. still no change

show me what you have as of so far.

show me what you have as of so far.

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

I will make time to rebuild it for you

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 :)

commented: Thanks for catching that error! +11
commented: :) +0

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

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

thank you, micharel. it works perfect.

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 :)

@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!

no problem :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.