HTML:
<ul>
<li class="nav-item">
<a>Hello</a>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
CSS:
*{
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
.nav-item{
position: relative;
margin-left: 50px;
margin-top: 20px;
}
.nav-item >a{
background: gray;
width: 100px;
text-align: center;
display: inline-block;
}
.nav-item > ul{
position: relative;
display: none;
width: 100px;
}
.nav-item > ul > li{
background: yellow;
opacity: 0.4;
display: block;
text-align: center;
}
.nav-item > a:hover + ul{
display: block;
}
.nav-item > ul :hover {
display: block;
}
The problem is that when i hover on drop down menu it closes,how do i prevent it?I tried using
.nav-item > ul :hover {
display: block;
}
to not hide it when hovering on it,but it doesn't fix the problem.I tried to google but i cant find any solutions,please help me.Thank you for your help.
Removing the space between ul and :hover:
.nav-item > ul:hover {
display: block;
}
See fiddle here
As per my understanding:
With the below code you are saying make the UL to display:block (within the nav-item) when you hover over it, but in fact it's hidden .nav-item > ul {display : none} so how can you hover over it?
.nav-item > ul :hover {
display: block;
}
If you remove the UL from this and keep it as below, even this works.
.nav-item :hover {
display: block;
}
Note: If you want to modify an element based on other element, you should use jquery.
Related
I have this menu that I have been working on for a while. I am using the CSS table displays to accomplish it. When the text inside of my links take up two lines, the ones that are only one line will not fill the parent li on hover. Is there any way I am missing that can accomplish this?
http://jsfiddle.net/g7jmh567/
css
.menu {
background-color: #687c9e;
display: table;
}
.menu-list {
display: table-row;
}
.menu-list > li {
display: table-cell;
height: 100%;
overflow: hidden;
line-height: 1.125rem;
overflow: auto;
}
.menu-list > li > a {
display: block;
color: #fff;
text-decoration: none;
padding: 1.25rem 1.25rem 1.25rem 0;
box-sizing: border-box;
height: 100%;
min-height: 2.25rem;
}
.menu-list > li > a:hover {
background-color: #7889a8;
}
.dropdown-list {
display: none;
}
.hidden {
display: none;
}
html
<nav class="content menu">
<ul class="menu-list">
<li>Home</li>
<li>A really long</li>
<li>Some really long word</li>
<li>Special Events</li>
<li>Newsletter</li>
<li>Photo Gallery</li>
</ul>
</nav>
Simply remove the padding from your li, and add it to your menu-list, check out the link below;
Nav
the reason why it didn't fill the entire li 'coz you're just filling the anchor
hover the li instead of the anchor
.menu-list > li:hover {
background-color: #7889a8;
}
JSFIDDLE DEMO
See This link: this may help you: https://jsfiddle.net/guruWork/8fwo0r06/2/
<nav class="content menu">
<ul class="menu-list">
<li><span>Home</span></li>
<li><span>A really long</span></li>
<li><span>Some really long word</span></li>
<li><span>Special Events</span></li>
<li><span>Newsletter</span></li>
<li><span>Photo Gallery</span></li>
</ul>
</nav>
And CSS
.menu {
background-color: #687c9e;
}
.menu-list {
display: table;padding:0; margin:0;width:100%;
}
.menu-list > li {
display: table-cell;
height: 100%;
overflow: hidden; vertical-align: top;
overflow: auto;
}
.menu-list > li > a {
display: table;
color: #fff;
text-decoration: none;
padding: 0;
box-sizing: border-box;
height: 100%;
min-height:53px; text-align:center;
}
.menu-list > li > a span{display: table-cell;padding: 5% .5rem;vertical-align: middle;}
.menu-list > li > a:hover {
background-color: #7889a8;
}
.dropdown-list {
display: none;
}
.hidden {
display: none;
}
How can I move my UL element over the the right of the browser without using float, or 'guesstimating' that the element is flush to the right margin through the use of tools such as margin px/% etc?
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
border: 1px solid black;
}
<div class="nav">
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
Depending on what browsers you need to support, you can use flexbox.
MDN - Flexible Boxes
Specifically, you want a container with display: flex; and justify-content: space-between;
Something like:
<div class="nav" style="display: inline-flex; justify-content: space-between;">
... child items here ...
</div>
Note that flexbox is only supported on IE11+ and all evergreen browsers (Chrome, Firefox, etc). IE10 has partial support.
See for more details regarding browser support.
If you need to support pre-IE10 browsers, you can try using position: absolute; and right: 0; on your ul.
Flexbox:
.nav {
display: inline-flex; //or just flex
justify-content: space-between;
}
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
border: 1px solid black;
}
Using position:
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
border: 1px solid black;
position: absolute;
right: 0;
}
I see from your comment on your original post that you are avoiding floats because your elements are not lining up properly.
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
float: left;
}
.nav ul {
display: inline-block;
border: 1px solid black;
float: right;
}
Lines up perfectly when you set the top margins to zero. Your elements are of different height so you need to line them up how you want using margin/padding.
Change the following css properties
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
float:none;
right:0;
margin-right:10px; // its just an example you can move as much as you want
border: 1px solid black;
}
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
Try position: absolute;, right: 0px;
I'm creating a web with a vertical navigation menu on the left. In this menu, I have several submenus which I would like to be expanded to the right when the mouse hovers the parent item.
Here is the html
<div id="leftmenu">
<ul>
<li>Item</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Item
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItme</li>
<li>SubItem</li>
</ul>
</li>
<li>item</li>
<li>Item</li>
</ul>
</div>
And here is my CSS
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
}
#leftmenu ul li:hover > ul {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
left: 100%;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
My problem is when I hover the mouse to an item that has subitems, the subitems appear but it down not in the same line as its parent item. Instead, it appears in the same line of the item the item I'm hovering. I'm learning CSS so I don't want to use any JavaScript in this case.
Please help me with this.
Sorry if I format something wrong since this is my first post here.
Thank you
You must write the <ul> tags before the <a> tags. Since, the <ul> is later going to be positioned as absolute, it is not going to affect the position of <a> tag...
I've edited the css a little bit to make it better, (hope you don't mind):
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
list-style: none;
padding: 10px;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
position: absolute;
top: 0;
left: 100%;
}
#leftmenu ul li{
position: relative;
}
#leftmenu ul li:hover > ul {
display: block;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
This should do the trick.
When an absolutely positioned element is styled inside an element,
that has a position which is not 'static', the 'top', 'left', 'bottom'
and 'right' css properties are relative to the parent container.
So here's what I did:
I changed the position of <li> tags to 'relative' and the submenu
<ul> top value as 'top : 0px;'. That's it.
I have a simple menu (centered with margin:0 auto) with some list items.
Now, I'm trying to keep the menu on the same centered position when I add an additional list items.
Here is the fiddle play with it
ul{
list-style-type: none;
background: red;
margin:0 auto;
width: 56%;
max-width:600px
}
ul li{
display: inline-block;
width: 100px;
background-color: #000;
color: #fff;
}
I want to an additional li's to the ul to wrap it and still be centered.
I don't want to use flexbox because IE doesn't support it :D
The problem is solved. Giving the ul {display:table} Thank you all,especially Coop !
Not sure if this is exactly what you're after but I've often had issues centering nav menus and came up with this solution:
ul{
display: table;
margin: 0 auto;
list-style-type: none;
background: red; }
ul li {
float: left;
color: #fff;
background-color: #000; }
Note the li's are floated so you also need to clear them on the ul. I'd suggest a clearfix solution to do that. For example the full code could be:
ul {
display: table;
margin: 0 auto;
list-style-type: none;
background: red; }
ul li {
float: left;
color: #fff;
background-color: #000; }
.clear:before, .clear:after { content: " "; display: table; line-height: 0; }
.clear:after { clear: both; }
.clear { *zoom: 1; }
...
<ul class="clear">
<li>First item here</li>
<li>Second item here</li>
<li>Third item here</li>
</ul>
I'm making a simple drop down menu that I'm using JavaScript to show and hide. The menu shows, and the links work still, but when I hover past the first link to drop down, the whole drop down menu goes away, even though I set a specific height for it. I also have a separate div with content below it, and the text in that div gets pushed out of the way, though I thought z-index would fix that.
function showDrop() {
document.getElementById("dropdown").style.visibility = "visible";
}
function hideDrop() {
document.getElementById("dropdown").style.visibility = "hidden";
}
#nav {
/* margin-left: 550px;
padding-top: 110px; */
font-family: 'Averia Serif Libre', cursive;
font-size: 24px;
position: relative;
}
#nav ul li {
display: block;
float: left;
margin-right: 10px;
}
#nav ul li a:link,
#nav ul li a:visited {
text-decoration: none;
float: left;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #00B2EE;
}
#nav ul li ul {
visibility: hidden;
top: 0;
left: 0;
display: block;
width: 100px;
height: 100px;
clear: both;
z-index: 2;
padding-top: 2px;
}
#nav ul li ul li {
width: 100px;
z-index: inherit;
background-color: #AAA;
font-size: 16px;
line-height: 22px;
}
<div id="nav">
<ul>
<li>About</li>
<li>Portfolio
<ul id="dropdown" onMouseOut="hideDrop();">
<li>Print Design</li>
<li>Web Design</li>
<li>Illustration</li>
</ul>
</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
Use the onmouseleave event instead, because onmouseout considers the mouse to be 'out' even if you're hovering children of the element. Sample code:
$("#dropdown").mouseleave(function() { //jQuery required; onmouseleave is IE-specific
hideDrop();
});
Hope that helped.