vertical css dropdown menu in one column?

Question

I have created a vertical navigational menu in css with two sub-menus.

But I can't figure out how to position them in one column so that they work properly. Is this possible?

html

 <ul>
   <li><a href="#">works</a>

     <ul>

        <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
      <ul>
             <li><a href="#">Category 1</a></li>
             <li><a href="#">Category 2</a></li>
             <li><a href="#">Category 3</a></li>
             <li><a href="#">Category 4</a></li>
             <li><a href="#">Category 5</a></li>
          </ul>

        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
     </ul>

   </li>

   <li><a href="#">photos</a>
    <ul>

     <li><a href="#">something</a></li>
     <li><a href="#">something</a></li>
    </ul>

  </li>

  <li><a href="#">friends</a></li>

  <li><a href="#">contact</a></li>

    </ul>
  </div></html>

css

#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;

}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}


#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul { display:block;


}

You want the sub-menus to appear below the parent item?

Ibrahim AshShohail
– Ibrahim AshShohail

2013-01-10 21:22:20 +00:00
Commented Jan 10, 2013 at 21:22 — Ibrahim AshShohail
– Ibrahim AshShohail, Commented Jan 10, 2013 at 21:22
Do you have a solution for this?

sta hulja
– sta hulja

2013-01-10 22:00:46 +00:00
Commented Jan 10, 2013 at 22:00 — sta hulja
– sta hulja, Commented Jan 10, 2013 at 22:00

Nojan · Accepted Answer · 2013-01-10 21:45:49Z

1

First of all your html structure is messy. the clean structure could be something like this:

<div id="menu">
  <ul>
    <li>
      <a href="#">works</a>
      <li>
        <a href="#">works subcategory</a>
        <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        </ul>
      </li>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a></li>
      <li><a href="#">Category 3</a></li>
      <li><a href="#">Category 4</a></li>
      <li><a href="#">Category 5</a></li>
    </li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li>
      <a href="#">photos</a>
      <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
      </ul>
    </li>
    <li><a href="#">friends</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

You had mistakes in closing tags,.. And i suggest you to use css resets while making dropdown menus. because user-agent predefined styles get you in trouble (try Normalize.css)

In CSS: you don't need to float the 2nd-level ul blocks and also setting list items position property to relative and using top and left properties for children ul is not a good solution.

I styled your menu a little bit and it looks fine. you can view it here: http://codepen.io/anon/pen/sdomr

answered Jan 10, 2013 at 21:45

Nojan

9131 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sta hulja Over a year ago

thank you,, it is just that Chategory 1,2,3.. where third submenu items. and i would like submenu-es to appear below the parent item

Collectives™ on Stack Overflow

vertical css dropdown menu in one column?

html

css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html

css

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related