0

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
}
3
Contributors
22
Replies
27
Views
5 Years
Discussion Span
Last Post by <M/>
Featured Replies
  • 2
    <M/> 170   5 Years Ago

    Have you ever googled a solution? Read More

  • 2
    <M/> 170   5 Years Ago

    Here is an example... http://www.devinrolsen.com/pure-css-horizontal-menu/ Try following it, you will catch the error Read More

  • 1
    <M/> 170   5 Years Ago

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

  • 1
    <M/> 170   5 Years Ago

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

  • 4
    <M/> 170   5 Years Ago

    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 … Read More

1

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

1

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

1

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

0

show me what you have as of so far.

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

4

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

Votes + Comments
Thanks for catching that error!
1

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

0

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

1

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

1

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.