CODEWITHSUNDEEP
htmlcssalignment
B.T
B.T

Reputation: 551

Sub-menu vertically align

I've got a simple menu that should show a sub-menu vertically. However, i changed this menu to be in order to center it, and it now doesn't show vertically but horizontally.

Here is my codepen :

http://codepen.io/anon/pen/NGwmGq

    .navitem{
height: 30px;
}

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {

 background-color:black;
 display: inline-block;
 padding: 0;
 vertical-align: middle;
 }
#menu li a {
 display:block;
 width:125px;
 color:white;
 text-decoration:none;
 line-height:30px

 }
#menu li a:hover {
 color:#FFD700;
 }

#menu ul li ul {
 display:none;
 }

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

#menu li:hover ul li {
 float:none;


 }

#menu li ul {
 position:absolute;
 } 

#menu {
 height:30px;
 margin-top: 30px;

 } 

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}
/* Logo */ 
#logo{
 height: 190px;
 width: 266px;
  background-color:black;
  margin: 0 30px;
}
/* Fin MENU */

As you can see, the "portfolio" actually shows the sub-menu but this sub-menu should be vertically aligned.

Upvotes: 1

Views: 151

Answers (4)

divy3993
divy3993

Reputation: 5810

Just Add display:block to your sub menu li.

#menu li:hover ul li {
 float:none;
 display:block; /* Add This */
 }

UPDATED : EXPLANATION

1) display:block; property is a block property in HTML. So every element with such property takes a new line(Elements views Vertically).

2) display:inline-block; property is a block but inline property. So elements which such property appears on same single line(Elements views Horizontally).

Working : Fiddle

Upvotes: 1

Allen
Allen

Reputation: 304

For li you have given display as inline-block that,s why they are coming in one line. so for portfolio submenu Write this css in your css file 

#menu ul li ul li {
  display: block;
}

Upvotes: 1

niyasc
niyasc

Reputation: 4490

In your css, you're making all main menu items inline using #menu li selector, which is also applied for lis in sub menu.

So you've to explicitly specify display: block for sub menu lis

Change your code as given below.

#menu li:hover ul li {
   float:none;
   display:block;
 }

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

You seem to have deleted the positioning context on the li

#menu li {
  background-color: black;
  display: inline-block;
  padding: 0;
  vertical-align: middle;
  position: relative; /* add this */
}

Upvotes: 3

Related Questions