CODEWITHSUNDEEP
htmlcsscodeignitersubmenu
Melvin Beverwijk
Melvin Beverwijk

Reputation: 63

css sub menu weird placement

menu problem

I have this problem with my menu, my last menu item "Apps" should not slide down but stay in place.

i need to solve this with css only.

my css:

div.menu{
display: block;
float: left;
width: 10%;
position: absolute;
height: 20%;
min-height: 20%;
margin-right: 0;
margin-left: 0;
margin-top: 5%;
text-align: center;
color: #428bca;
z-index: 0;
}
div.menu ul{
list-style-type: none;
margin-right: 10px;
margin-left: 10px;
padding-left: 0;
padding-right: 0;
}
div.menu ul li{
background-color: #FFF;
width: 100%;
margin-top: 1px;
position: relative;
}
div.menu ul li ul {
display: none;
left:125px;
top:-20px;
float: right;
width: inherit;
height: inherit;
z-index: 1;
position: relative;
}

div.menu ul li ul li {
background: #fff;
}

div.menu ul li:hover ul {
display: block;
}
  div.menu li:hover{
background-color: #ddd;
 }

Please help me, because i am very confused. i am using codeigniter

Upvotes: 0

Views: 66

Answers (2)

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

I think that this would help you:

div.menu ul li ul {
display: none;
left:100%;
top:0px;
position: absolute;
}

Also make sure that your html is written correctly.

Upvotes: 1

Toby Cannon
Toby Cannon

Reputation: 735

Hard to see without your HTML, next time perhaps add a fiddle, but anyway, have a look at using the last-child selector, and use position:fixed so that it should stay in the same place.

Upvotes: 0

Related Questions