Hi i have a navbar created by flex box. Items are space-evenly. I need fill gaps around element with same blue color. And also after hover color will change so i need to select both li elements and gaps is there any way how to select them?.
#menu{
display: flex;
margin-top: 0;
padding: 0;
justify-content: space-evenly;
}
#menu li {
height: 100%;
list-style-type: none;
background:rgba(5, 151, 242, 1);
}
#menu li a{
color:white;
text-decoration: none;
text-transform: uppercase;
line-height: 6.5;
width: 100%;
height: 100%;
}
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Longer Link 3</li>
<li>Link 4</li>
</ul>
Your problem is that you are thinking to complex. you don't need the justify-content: space-evenly;, but you need to let the li-elements grow with: flex-grow: 1;
Also you don't need to use rgba, if you don't use transparency you can use rgb
#menu{
display: flex;
margin-top: 0;
padding: 0;
}
#menu li {
height: 100%;
list-style-type: none;
background:rgb(5, 151, 242);
flex-grow: 1;
text-align: center;
}
#menu li:hover {
background:rgba(155, 5, 242);
}
#menu li a{
color:white;
text-decoration: none;
text-transform: uppercase;
line-height: 6.5;
width: 100%;
height: 100%;
display: block;
}
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Longer Link 3</li>
<li>Link 4</li>
</ul>
EDIT:
I made the whole block clickable as requested additionally. This is done by adding display: block; to the a-elements. A link is normally an inline-element, so this switches it to behave like a block element witch listens to the width/height settings already present in the question.
Instead of using justify-content: space-evenly, you can use flex: 1 for each <li>. You can center the text using text-align: center.
Then, you create your hover effect for each item.
#menu{
display: flex;
margin-top: 0;
padding: 0;
}
#menu li {
height: 100%;
list-style-type: none;
background:rgba(5, 151, 242, 1);
flex: 1;
text-align: center;
transition: 0.3s;
}
#menu li a {
border-left: 1px solid red;
border-right: 1px solid red;
color: white;
text-decoration: none;
text-transform: uppercase;
line-height: 6.5;
height: 100%;
display: inline-block;
}
#menu li:hover {
background: rgba(5, 151, 242, 0.8);
}
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
Related
I am experimenting with a navigation bar, and I am unsure of how to float part of the list to the right, without the text becoming laterally inverted. I want the first link to be on the very left side, whilst all the rest of the links are on the right side. Also, using float: right makes the list items very compressed, and I was wondering on how to get past this? I have chosen to do it this way so that I could use a line when hovering over the links. https://codepen.io/anon/pen/xQjozy
html:
<div class="navigationbar">
<ul>
<li class="one">Link 1</li>
<li class="two rightside">Link 2</li>
<li class="three rightside">Link 3</li>
<li class="four rightside">Link 4</li>
<li class="five rightside">Link 5</li>
<li class="six rightside">Link 6</li>
<hr />
</ul>
</div>
css:
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 16%;
padding: .15rem 0;
margin: 0;
text-decoration: none;
color: #fff;
font-size: 1.5vw;
}
.two:hover ~ hr {
margin-left: 16%;
}
.three:hover ~ hr {
margin-left: 32%;
}
.four:hover ~ hr {
margin-left: 48%;
}
.five:hover ~ hr {
margin-left: 64%;
}
.six:hover ~ hr {
margin-left: 80%;
}
hr {
height: .25rem;
width: 16%;
margin: 0;
background: blue;
border: none;
transition: .3s ease-in-out;
}
.navigationbar{
background-color: green;
overflow: hidden;
}
ul{
margin:0.7vh 0vh 0.7vh 0vh;
}
/*
.rightside{
float:right
}*/
Thanks
I think this is closer to what you want I hope.
Also using border bottom is much better way to handle a link underline. It will always line itself up under the content perfectly. I would also suggest changing the font size from vw to px or em and use media queries to change the font as the browser width gets smaller/larger.
EDIT: This is how I would correct your code but I don't think this is the correct way to accomplish this.
ul li {
display: inline;
text-align: center;
border-bottom:3px solid transparent;
}
a {
display: inline-block;
padding: .15rem 0;
margin: 0;
text-decoration: none;
color: #fff;
font-size: 1.5vw;
padding:6px 15px; /*add more spacing to links*/
}
li:hover {
border-bottom:3px solid blue;
}
.navigationbar{
background-color: green;
overflow: hidden;
}
ul{
margin:0.7vh 0vh 0.7vh 0vh;
}
.leftside {
float:left;
}
.right_side_container{
float:right
}
<div class="navigationbar">
<ul>
<li class="one leftside">Link 1</li>
<div class="right_side_container">
<li class="two">Link 2</li>
<li class="three">Link 3</li>
<li class="four">Link 4</li>
<li class="five">Link 5</li>
<li class="six">Link 6</li>
</div>
</ul>
</div>
You could set a certain width to each of the links you floated to the right,that way it wont be compressed
I want my list items to be displayed next to each other but for some reason they always overlap. Can someone tell me how to fix this?
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
position: fixed;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
Thank you in advance!
You need to remove position: fixed in 'li' element, because if you giving every 'li' element position fixed that will make your item always overlap.
May be you can try update your 'ul' and 'li' element style like this code bellow:
ul {
list-style: none;
position: fixed;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
background-color: white;
}
That's because you have define position: fixed for li tags.
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
}
li {
display: inline;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
//position: fixed;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
Take out the position: fixed. This fixes an element within the browser viewport and removes it from the flow. Not what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
fixed
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of top, right, bottom, and left.
give position fixed to ul and you will get list item properly
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
position: fixed;
padding:5px;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
I have an unordered list with a lot of list items. Some of the list items are links, some are not. I want to add padding to the list items so the appearance is consistent regardless of whether it is a link or not, i.e. I do not want to add padding to the anchor, but to the list and for the anchor to wrap around the link AND padding.
Despite using display:block on hover the background color is only around the text inside the link. It ignores the padding. Is there a way to get the link to include the padding (without putting padding on the link)?
ul li {
float: left;
line-height: 5em;
padding: 0 2em;
}
a:link {
display: block;
}
a:visited {
display: block;
}
a:hover {
display: block;
background-color: rgb(245, 245, 245);
}
a:active {
display: block;
background-color: rgb(245, 245, 245);
}
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5
</li>
</ul>
You can use the hover the li instead of the a to correct the background-color applied on hover by using:
li:hover a {
display: block;
}
li:hover {
background-color: rgb(245, 245, 245);
}
instead of:
a:hover {
display:block;
background-color:rgb(245,245,245);
}
See demo below:
ul li {
float: left;
line-height: 5em;
padding: 0 2em;
}
a:link {
display: block;
}
a:visited {
display: block;
}
li:hover a {
display: block;
}
li:hover {
background-color: rgb(245, 245, 245);
}
a:active {
display: block;
background-color: rgb(245, 245, 245);
}
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5
</li>
</ul>
Here you go, my comments should explain everything but feel free to ask.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
ul{
list-style-type: none; /* Feel free to remove this, just easier without bullets */
}
ul li {
float: left;
line-height: 5em; /* Should be the same as height */
padding: 0 2em;
position: relative; /* Make sure a & a:before can stay contained */
height: 5em; /* Should be same as line-height */
white-space: nowrap; /* Ensure that your items don't wrap and mess up width */
z-index: -1; /* So that a:before is able to trigger with :hover */
}
a{
position: relative; /* Make sure a:before can stay contained */
display: block; /* Ensures that a can expand to full size of container */
}
a:before{
content: ""; /* Necessary for :before element to be created */
position: absolute; /* Vital - allows positioning */
top: 0;
right: -2em; /* Minus same padding as li has */
bottom: 0;
left: -2em; /* Minus same padding as li has */
z-index: -1; /* Makes sure :before doesn't go above anchor text */
}
a:hover:before,
a:active:before {
background-color:rgb(245,245,245);
}
Sorry, my bad, was really tired of trying to figure out the issue. So lemme rephrase the question - "How do i make drop-down menu appear below specific item of my centered horizontal menu". ( I've changed the code a bit)
HTML
<div class="menu">
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4🔽
<ul id="dropdown">
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
CSS of centered .menu
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
height: 30px;
position: relative;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
margin-top: 40px;
font-family: "oswald", sans-serif;
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: rgba(107, 163, 252, 0.28);
}
just add
ul#dropdown
{
padding: 0px;
}
see jsfiddle here : https://jsfiddle.net/yxLzbkL3/
edit fyi : if the padding is not specified the user-agent styling from your browser will auto indent multiple lists using padding.
Im trying to do a sub-sub menu in a webpage. I tried following the help in this post: how do I make a sub sub menu with css? but to be honest i didnt understand what code i had to add in each class and when i tried it didnt show anything. Here is the code of the menu:
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
Prueba
Here goes the sub-submenu
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
</ul>
</li>
</ul>
</div>
Also the CSS of the classes are these ones (The sub_menu and l7menu class dont have any style applied):
.mainlist {
border-bottom: 2px solid #EAD704;
background: none;
margin-left: 2px !important;
}
.mainlist:hover {
color: #EAD704 !important;
}
ul.dpdown {
float: right;
position: relative;
z-index: 1000;
}
ul.dpdown li {
font-weight: bold;
float: left;
zoom: 1;
display: inline;
line-height: 20px;
list-style: none outside none;
margin-left: -25px;
}
ul.dpdown a:hover {
color: #EAD704;
}
ul.dpdown a:active {
color: #FFFFFF;
}
ul.dpdown li a {
color: #e8e8e8;
display: block;
padding-bottom: 4px;
text-align: center;
width: 150px;
}
ul.dpdown li:last-child a {
border-right: none;
} /* Doesn't work in IE */
ul.dpdown li.hover, ul.dpdown li:hover {
color: black;
position: relative;
}
ul.dpdown li.hover a {
color: white;
}
/*
LEVEL TWO
*/
ul.dpdown ul {
width: 150px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.dpdown ul li {
font-weight: normal;
background: #333;
color: #000;
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dpdown ul li a {
background-color: #101010;
border-right: medium none;
display: inline-block;
margin-top: 2px;
padding: 10px 0;
width: 150px;
font-size: 13px;
color: #999999;
}
ul.dpdown ul li a:hover {
background-color: #222222;
}
/*
LEVEL THREE
*/
ul.dpdown ul ul {
left: 100%;
top: 0;
}
ul.dpdown li:hover > ul {
visibility: visible;
}
As always thank you very very much !
Here's a FIDDLE, I fixed your CSS a little.
Your HTML should look like this
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
<li>Prueba</li>
<li>Here goes the sub-submenu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>