How to make a CSS menu from raw HTML code

Question

I have some HTML code of a menu, I have started creating the CSS for the menu but I have come to a halt as I am not sure where to go next

I have added this CSS so far:

#menu-my-integra, ul.sub-menu {
    list-style: none;
  padding: 0;
  margin: 0;
}
#menu-my-integra li {
    display: inline;
    margin-right:10px;
}
ul.sub-menu {
    display:none;
}
#menu-my-integra li:hover ul.sub-menu {
    display: block;
    max-height: 200px;
}

So, this shows the menu in a horizontal position but I want to display the sub menus in a vertical list below the parent item.

I created a fiddle here:

There are plenty of tutorials out there on this, here is one code-tricks.com/simple-css-drop-down-menu — Jacob G
– Jacob G, Commented Nov 10, 2015 at 19:13
thank you for that, ive used that CSS (jsfiddle.net/odzqj7r5/3) which works well. however i cannot work out how i can make the sub menu's have the same width and each link on the sub menu to have the same width — charlie
– charlie, Commented Nov 10, 2015 at 19:18
I wrote a book series titled "Functional CSS" and the last case of the first volume covers (in great detail) how to build a multi-level dropdown menu. It's a cool case that also uses flexbox and media queries. Cheers. — DRD
– DRD, Commented Nov 10, 2015 at 19:33
ive changed my code to this now: jsfiddle.net/odzqj7r5/6 how can i make the hover actions work on the a too? — charlie
– charlie, Commented Nov 10, 2015 at 19:40

dmcknight · Accepted Answer · 2015-11-10 19:46:07Z

I made it work by implementing the box-sizing:border-box attribute:

/*Initialize*/
ul#menu-my-integra, ul#menu-my-integra ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li {
    list-style-type: none;
    display:inline-block;
    width:20%;
    background: #666;
    text-align:center;
}
/*Link Appearance*/
ul#menu-my-integra li a, ul#menu-my-integra li ul.sub-menu li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 8px;
    display:inline-block;
    margin:0;
    box-sizing:border-box;
}
/*Make the parent of sub-menu relative*/
ul#menu-my-integra li {
    position: relative;
}
/*sub menu*/
ul#menu-my-integra li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu-my-integra li:hover ul.sub-menu {
    display:block;
}

NOTE: you will have to adjust the % width of the 'li' elements depending on how many there are. Hope that helps!

Collectives™ on Stack Overflow

How to make a CSS menu from raw HTML code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related