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;
}
Related
I am building a navbar with hover effects over the nav items and an inline button, however, the text in my button is not lining up with the other nav items. In addition I am having trouble figuring out how to get the red hover background to space itself evenly above and below the text of my nav items. What am I doing wrong?
<nav class="navbar">
<a id="header" href="#">Adopt <span class="me">Me</span> </a>
<ul >
<div id="rightitems">
<li>About Us</li>
<li>What we do</li>
<li>Benefits</li>
<li>Our Buddies</li>
<button class="btn">Contact Us</button>
</div>
</div>
</ul>
</nav>
.btn{
display: inline;
width: auto;
text-decoration: none;
margin: 0;
}
.btn a{
margin: 0;
}
body{
background-image: url(bulldog.jpg)
}
a{
text-decoration: none;
}
nav ul{
list-style-type: none;
margin: 0;
padding:0;
text-decoration: none;
display: flex;
position: relative;
}
nav a{
margin-right: 10px;
margin-left: 10px;
padding-top: 10px;
}
.navbar{
display: flex;
justify-content: space-between;
width: 100%;
}
#rightitems{
display: flex;
}
li{
width: auto;
}
li:hover{
width: auto;
}
li:hover {
background-color: #FF4850;
color: white;
border-radius: 10px;
}
nav li:hover{
color: white;
}
nav a:hover{
color: white;
}
Looks like some duplicate selectors and a bit of redundant styling. I've made some adjustments check out this fiddle:
nav a {
margin: 10px;
text-decoration: none;
}
nav a:not('me'):hover{
color: white;
}
.navbar #rightitems li{
padding: 10px 5px;
}
https://jsfiddle.net/cf2vd64y/2/
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.
I set .inside with width:100% and the span to have width:25% but the fourth span keeps getting pushed down.
http://jsfiddle.net/at8g6n0r/
.nav_list {
width: 100%;
max-width: 800px;
display: block;
}
ul {
list-style: none;
overflow: hidden;
/*as we will give its child element FLOAT property*/
}
.inside {
width: 100%;
}
.inside > li {
width: 25%;
float: left;
/* Inline-block has a browser issue, it leaves some margin*/
text-align: center;
display: inline-block;
list-style-type: none;
}
.button-dropdown > a {
text-decoration: none;
color: #000;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover,
.nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span,
.nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<div class="nav_list">
<ul class="nav inside">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
→ Resume (PDF)
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
About
</a>
</li>
</ul>
</div>
The easiest way is to add float:left to your child elements.
or You can also give the parent element- font-size:0 and its child element the font-size:needed font-size property, this way you don't need to give FLOAT:LEFT property and fourth element will stay inline.
Your HTML structure is bit wrong - following some bad practices, which won't get validated. for example: there shouldn't be any DIV inside UL as direct child.
Read more about inline-block issues here:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
didn't really added anything in your code just have removed the bad practices like div and span direct inside ul this looks good for now . if you want it to be in certain way and not like this please let us know for now this will work.
.nav_list {
width: 100%;
max-width: 800px;
display: block;
}
ul {
list-style: none;
}
.button-dropdown > a {
text-decoration: none;
color: #000;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover,
.nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span,
.nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<div class="nav_list">
<ul class="nav">
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
→ Resume (PDF)
</a>
</li>
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
About
</a>
</li>
</div>
</ul>
</div>
It's because inline-block keeps spaces between the elements if they are present.
you could:
open the next span right after the closing of the previous one
use display:block;float:left; and clear the float (e.g. by overflow:hidden on .inside)
Trying to apply styles to all of the elements except the last one. But it doesn't work. Tried all this:
ul li:not(ul li:nth-last-child)
ul li:not(nth-last-child)
ul li:not(:nth-last-child)
ul {
list-style: none;
margin: 0;
float: left;
width: 100%;
text-align: center;
}
ul li {
height: 54px;
width: 54px;
border-radius: 60px;
}
/* /// THIS PART IS NOT WORKING PROPERLY
RIGHT NOW IT REMOVES MARGIN FOR ALL THE ELEMENTS/// */
ul li:not(ul li:nth-last-child) {
margin-left: 10px;
}
.red {background: #fc4c4f;}
.blue {background: #4fa3fc;}
.yellow {background: #ECD13F;}
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
try the following. I assume that you dont want to apply the css to the last ul li element.
ul > li:not(:last-child){
margin-left: 15px;
}
:nth-last-child actually expects a parameter which to look for.
CSS3 :nth-last-child() Selector
Trying to apply styles to all of the elements except the last one.
Why not use last-child?
ul {
list-style: none;
margin: 0;
float: left;
width: 100%;
text-align: center;
}
ul li {
height: 54px;
width: 54px;
border-radius: 60px;
}
ul li:not(:last-child) {
margin-left: 10px;
}
.red {
background: #fc4c4f;
}
.blue {
background: #4fa3fc;
}
.yellow {
background: #ECD13F;
}
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
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>