I have a dropdown, when I expand it, it's item and existing controls are getting mixed. I want to hide bg items completely and Dropdown going inside another divs. This is my code
dropdown.component.css
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
min-width: 18em;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent.active>span>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 18em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
dropdowncomponenet.html file
<ul #dropdown [ngClass]="isChild ? 'child' : ''">
<li class="parent" *ngFor="let item of items" (click)="open(item)" [ngClass]="item.isOpen ? 'active' : ''">
{{item.name}}
<span class="expand" *ngIf="item.children.length > 0"> ❯</span>
<span dropdown *ngIf="item.children.length > 0 && item.isOpen" [items]="item.children" isChild="true"></span>
</li>
</ul>
Screenshot before and after expanding dropdown. Sorry for not providing images clear
Issue has bee fixed by adding two atribute in css style .parent
position: relative;
z-index: 10000;
Related
I have been working to make a multi-level dropdown navbar, and when the dropdown finally started working, the rest of the navigation broke.
I'm trying to get a navbar with a width of 100% of the body, and then a container that is 80% of the body
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
However, after getting the dropdown to work, the background color of the nav (red) is no longer showing, and the grey area of the dropdown lists only spans across a much smaller area.
How can I get the dropdown/navigation lists to sit within the container (80% of body) while keeping the span all the way across the 100% width of the body? Note, the colors don't matter so much right now, just getting the right distance setup.
Here is a CodePen
And the snippet
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: auto;
background: #999999;
}
.third-level-menu > li:hover {
background: #cccccc;
}
.second-level-menu {
z-index: 2;
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
z-index: 2;
float: left;
line-height: normal;
text-align: center;
height: auto;
}
.top-level-menu > li {
display: inline-block;
position: relative;
float: left;
height: 30px;
width: 100px;
background: #999999;
}
.top-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu li:hover > ul {
display: inline;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}
<nav id="nav">
<div class="container">
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
Change your CSS to look like this:
#nav{
position: absolute;
top: 0px;
left: 0px; // setting left and right to 0px will make the container take up the entire page
right: 0px;
background-color: red;
}
Also, if you want your elements in the navbar centred, add the following lines of code to your current stylesheet.
.container{
margin: 0 auto; // center the container
}
.top-level-menu{
width: 100%; // make the width of the menu 100% of the container
}
.top-level-menu li{
width: 25%; // make the width of each li element 25% of the container (100% / 4 li = 25%)
}
you need to clear float
.clearfix::after {
content: "";
clear: both;
display: table;
}
add clearfix class to top-level-menu
I am practicing in making a css dropdown. However, in the following code, on hovering the "Hello" li , I want the dropdown li "Hello1" to drop just below it. It's happening. However unfortunately the other li's "Cool" and "World" also comes down. I wanna know both the reason and the solution. However I don't want to add float to any of the elements as it has created some issues previously.
html body {
height: 100%;
width: 100%;
}
.roundborder {
border-radius:5px
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 75%;
/* [disabled]background-color: rgba(153,153,153,1); */
height: auto;
}
ul {
text-align: center;
border: thin solid rgba(0,0,0,1);
width: auto;
margin-top: 0;
margin-right: 10%;
margin-bottom: 0;
margin-left: 10%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: rgba(255,0,0,1);
height: 30px;
}
li {
display: inline-block;
border: 1px solid black;
/* [disabled]padding: 5px; */
height: 30px;
width: auto;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
ul > li > ul {
width: 100px;
display: none;
padding-left: 0px;
margin-top: 10px;
margin-left: 0px;
}
ul > li > ul > li {
display:block;
list-style-type:none;
}
ul li:hover > ul {
display: block;
}
<div class="container">
<ul class="roundborder">
<li>Hello
<ul>
<li> Hello1 </li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>
Because your not specifically setting the 'position' attribute for your dropdown it will use the default positioning(position:relative) which will affect the positioning of the elements around it try position:absolute
i.e
ul > li{
position:relative;
...
}
ul > li > ul{
position:absolute;
left:0;
top: 30px;/*or height of header*/
...
}
This article explains the positioning attribute in depth https://developer.mozilla.org/en/docs/Web/CSS/position
I am trying to give the menu elements a hover, but they are also having a padding: 10px; and as the result of that the :hover: background-color: will start from the 10px padding.
Any idea how to solve the problem? Here's a jsfiddle demo for that: http://jsfiddle.net/eufqg7d9/
This is caused by the default padding of the UL. You can either explicitly set this to padding: 0 or use a reset like http://meyerweb.com/eric/tools/css/reset/.
Here is your fiddle with a this reset applied: http://jsfiddle.net/h3erxugg/
You can also skip adding extra classes (like "list-item") and simply target the 'li' element itself within the #menu "namespace". Here's an example of what I mean:
<div id="menu">
<ul>
<li>Menü #1</li>
<li>Menü #2</li>
<li>Menü #3</li>
</ul>
</div>
And then the corresponding CSS would look something like this:
#menu ul {
list-style: none;
}
#menu li {
padding: 10px;
}
#menu li:hover {
opacity: 0.7;
background-color: red;
}
Updated fiddle: http://jsfiddle.net/eufqg7d9/3/
li.menu-item:hover {
margin-left: 10px;
padding-left: 0px;
opacity: 0.7;
background-color: red;
}
Since it was unclear what you were asking I have made you another fiddle: http://jsfiddle.net/eufqg7d9/6/. This basically creates the effect of your picture.
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
}
div#main {
width: 900px;
height: auto;
border: 1px solid #ccc;
margin: 0 auto;
}
div#menu {
width: 300px;
height: auto;
float: left;
background-color: yellow;
}
ul.menu-list {
list-style: none;
}
li span {
margin-left: 40px;
}
li.menu-item {
width: auto;
padding: 10px;
}
li.menu-item:hover {
opacity: 0.7;
background-color: red;
}
Try to update this portion of css.
ul.menu-list {
list-style: none;
padding-left: 0;
}
I have added padding-left: 0; to remove the padding on the left side.
Not sure why there is a space to the right of each li, as you can see here when you mouse over it. Obviously don't want it there and can't figure out how to get rid of it. Any help would be greatly appreciated!
Here is the code:
HTML:
<header>
<div class="nav-container">
<nav class="nav-items" role="navigation">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
position: fixed;
top:0;
background-color:#2C5463;
height:2.3em;
width: 100%;
border-bottom-color: black;
border-bottom-style: solid;
}
header .nav-container {
margin: 0 30px;
height: 100%;
display: block;
padding: 0;
}
.nav-items {
float: left;
margin: 0;
height: 100%;
}
.nav-items ul {
display: inline-block;
margin: 0;
height: 100%;
}
.nav-items ul li {
display: inherit;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
.nav-items ul li a {
display: inherit;
text-decoration: none;
color: #ffffff;
margin: 0 auto;
padding-top: 8px;
white-space: nowrap;
height: 100%; /* Width and height of top-level nav items */
width: 90px;
text-align:center;
vertical-align: middle;
}
.nav-items ul li:hover {
background: #617F8A
}
http://jsfiddle.net/eF83x/
Inline elements are sensitive to white space. Remove the white space and the problem goes away.
Ex:
<ul>
<li>list1</li><li>list2</li><li>list3</li>
</ul>
jsFiddle example
You can remove the spaces between the list items literally, occupy the space with HTML comments (<!-- -->), or float them left.
Just needs to changes on css class here for your solution,
.nav-items ul
{
display: **inline-table**;
margin: 0;
height: 100%;
}
Demostration
What you could also do is make the lis float left and display them as block. This will fix it without messing with the html code.
.nav-items ul li {
float: left;
display: block;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
jsFiddle example
I'm building a navigation menu where I use a regular ul#nav.
In my example bellow I'm trying to make the div inside the li#third hang over the bottom of the ul#nav. I know I need to use position: absolute on the div inside li#third but if I do that then it just takes up the 100% of the width assigned to it.
I tried changing the position: absolute; width: 40%; on the div but then the last li slides under it.
How can I keep the width the same as the li#third element and still have it flow over it at the bottom?
Updated example: http://jsfiddle.net/VyHJR/24/
HTML :
<ul id="nav">
<li id="first">item</li>
<li id="second">item</li>
<li id="third"><div id="search">search</div></li>
<li id="fourth"><div id="flag"><div id="flag_item">4</div></div></li>
</ul>
CSS :
ul#nav { width: 600px; background-color: #fdd; padding: 0; margin: 30px 0 0 20px; overflow: hidden; }
ul#nav li { float: left; text-align: center; }
ul#nav li a { color: #333333; }
ul#nav li#first { background-color: #dff; width: 20%; padding: 6px 0; }
ul#nav li#second { background-color: #ddf; width: 20%; padding: 6px 0; }
ul#nav li#third { background-color: #dfd; width: 40%; }
ul#nav li#fourth { background-color: #ffd; width: 20%; }
li#third div#search { width: 100%; background-color: #333333; height: 40px; color: #ffffff; }
li#fourth div#flag { width: 100%; height: 20px; background-color: #333333; }
li#fourth div#flag div#flag_item { width: 1px height: 30px; background-color: red; }
See: http://jsfiddle.net/thirtydot/VyHJR/34/
Now I understand what you were trying to do, it makes sense.
I removed overflow: hidden on ul#nav, which I assume was there to contain the floats, and replaced it with display: inline-block. I could also have used clearfix.
I added position: relative; height: 1px; to ul#nav li#third. Some height was required, otherwise the fourth li takes the place of the third. position: relative to contain the absolutely positioned div#search.
I added left: 0 to div#search purely to fix IE7.
li{ overflow: hidden;
position: relative;}