This question already has answers here:
Change height-top of item when hover
(2 answers)
Closed 4 years ago.
https://jsfiddle.net/fnu483z0/5/
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
ul {
display: flex;
}
ul li {
list-style: none;
padding: 1em;
border-right: 1px solid #000;
background-color: #CCC;
}
ul li:last-child {
border-right: none;
}
ul li:hover {
padding-top: 40px;
background-color: #333;
}
The problem is that on hover other items are also affected, they also expand? Should look like this when hovering an item:
The problem is that on hover other items are also affected, they also expand?
Of course they do, because they are all children of the same flex container - and adding padding to one of the items changes the height of the container, so the others grow with it accordingly.
You can easily counter this by giving the hovered item a matching negative margin-bottom:
ul li:hover {
padding-top: 40px;
margin-bottom: calc(1em - 40px); // your default li padding was 1em,
// so we have to calculate the right difference here
background-color: #333;
}
https://jsfiddle.net/fnu483z0/18/
In your ul add ->
align-items: flex-start;
ul {
display: flex;
align-items: flex-start;
}
ul li {
list-style: none;
padding: 1em;
border-right: 1px solid #000;
background-color: #CCC;
}
ul li:last-child {
border-right: none;
}
ul li:hover {
padding-top: 40px;
background-color: #333;
position: relative;
z-index: 1;
}
<div>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
Related
So I have the following code:
<style>
.menu {
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
}
.menu ul a {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul a li {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul a:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
}
</style>
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
Or if you prefer:
https://jsfiddle.net/f64z4tp8/1/
As you can see I have three links, and in between are an icon (star). However, I would like it so that the stars (before items) are not links. Can this be done ?
Your markup is incorrect: you cannot nest other elements except for <li> directly within <ul> (or <ol> too, for the sake of completeness). If you update your markup to reflect that changes, i.e.:
<ul>
<li>...</li>
</ul>
and slightly modify your selectors by changing this:
.menu ul a:not(:first-child):before
...to this:
.menu ul li:not(:first-child):before
and you are good to go:
.menu {
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
}
.menu ul li {
display: inline-block;
}
.menu ul a {
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
I've added display:inline-block; to the .menu ul a:not(:first-child):before css class. At this point the text-underline goes away and the stars become red.
This is because the CSS specs say:
When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
.menu {
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
}
.menu ul li a {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li a {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
Put as CSS selector:
.menu ul a:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
text-decoration: none;
pointer-events: none;
}
pointer-events: none; remove any pointer interaction with the ::before element.
text-decoration: none; remove any default UI effect like underline.
In order to achieve this you'll need to add the stars outside of the list links. You should also follow the HTML specs as much as possible, where <a> are not valid <ul> child elements.
So the quickest solution would be something like this:
https://jsfiddle.net/f64z4tp8/8/
HTML:
You can fix the HTML structure and use it according to the official specs by making the <a> elements children of the <li> items, like so:
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
CSS:
Since you changed the HTML structure, you'll also need to update the CSS selectors ensure you're still styling the stars and list items correctly, so change the rules that target .menu a li to just .menu li or just .menu a.
For example, on the selector where the star is added, change from .menu ul a to .menu ul li, ending up with something like this:
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
color: $primaryRed;
}
EXAMPLE SOLUTION:
.menu {
grid-area: menu;
justify-self: right;
align-items: center;
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
font-family: 'LemonReg', sans-serif;
}
.menu ul a {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
color: $primaryRed;
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
You must change html code, a element must be inside li element.
Like this:
<li>LINK 1</li>
and also
:before for li
.menu {
grid-area: menu;
justify-self: right;
align-items: center;
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
font-family: 'LemonReg', sans-serif;
}
.menu ul a {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
color: blue;
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
I'm trying to get my navbar centered on my page with the edges of navbar going for entire length of browser window. I cannot figure this out. I think it has something to do with the float:left of the individual nav items. I want this nav bar to be orange background across entire browser window, but the actual nav items to be centered on page. I've copied code below and working demo below that.
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
#nav-wrapper {
width:100%;
background: #ff6633;
margin 0 auto;
}
#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
}
.nav li {
float: left;
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 220px;
z-index: 9999;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
}
.nav li:hover > ul {
display: block;
}
http://codepen.io/trevoray/pen/KwJPLO
#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
text-align:center
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav li > ul > li {
width:100%;display:inline-block
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
width:100%;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
position: relative;
width: 32%;
}
.nav li {
display:inline-block
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 100%;
z-index: 9999;
list-style:none;
text-align: left !important;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
width:100%;
box-sizing: border-box;
}
.nav li:hover > ul {
display: block;
}
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
try this :http://jsfiddle.net/au07b2r3/3/
i remove float left from li ..and set display : inline-block
So I am struggling to make a show/hide button within my navigation to work. My goal is do this purely with CSS. It is supposed to activate when the browser screen is too small to display all the navigation items. I am successful in hiding the items I do not want seen at certain screen widths, however I cannot seem to get the link which activates the :target to display them when clicked.
Here is the css
nav {width:100%; min-width:287px;}
nav ul {padding:0;}
nav li {
list-style: none;
width:26%;
min-width:67px;
display:block;
line-height: 2.5em;
position: relative;
float: left;
border-bottom: 1px solid #fff;
background-color:#333;
box-shadow: 0px 5px 5px 1px #333;
text-align:center;}
nav li a {color:#fff; text-decoration:none; height:100%; font-size:1em; display:block; white-space:nowrap;}
nav li:hover {background-color:#BA7007;}
nav li a:hover {color:#FFF;}
nav li a:visited {color:#FFF; background-color:#333;}
.prio-alpha {}
.prio-gamma,
.prio-beta,
.show-nav-less {display: none;}
#prio:target + .prio-beta,
#prio:target + .prio-gamma,
#prio:target + .show-nav-less {display: block; }
#prio:target + .show-nav-more { display: none; }
.show-nav-more {width:20%;}
#media screen and (min-width: 41em) {
nav li {width:20%;}
nav li a {font-size:1.4em;}
.prio-beta { display: block; }
#prio:target + .prio-gamma, #prio:target + .show-nav-less {display: block;}
#prio:target + .show-nav-more { display: none; }}
#media screen and (min-width: 65em) {
nav li {width:16.5%;}
.prio-gamma { display: block; }
.show-nav-more,
#prio:target + .show-nav-less { display: none; } }
and html:
<nav>
<ul>
<li class="prio-beta">Home</li>
<li class="prio-alpha">Research</li>
<li class="prio-alpha">Publications</li>
<li class="prio-gamma">Space Flies</li>
<li class="prio-gamma">Aging PPG Project</li>
<li class="prio-alpha">Contact</li>
<li class="show-nav-more">+ more</li>
<li class="show-nav-less">- less</li>
</ul>
I have tried to switch up the order, placing the class in front of the :target and even removing #prior and just using .class:target to no apparent difference in the function of the code when live.
From what I understand you just want it so that you don't need JS for a submenu to open on click?
Here's a very quick/dirty version, it should get the idea across and hopefully you can edit it for your needs
Quick and Dirty
#nav {
list-style-type: none;
position: relative;
}
#nav li {
display: inline-block;
width: 100px;
border: 1px solid grey;
border-radius: 2px;
box-sizing: padding-box;
padding: 3px;
}
#nav #show_more {
display: none;
}
#nav li:target {
display: block !important;
position: relative;
top: 100%;
left: 10px;
}
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>
More
<ul class="submenu">
<li id="show_more">
There is more stuff here, woo.
</li>
</ul>
</li>
</ul>
One that uses Hovers
This should give a bit more responsiveness when hovering over a menu item. I'm not sure what you are going for, but hopefully one of these helps.
#nav,
#nav > li {
list-style-type: none;
position: relative;
}
#nav li {
display: inline-block;
width: 100px;
border: 1px solid grey;
border-radius: 2px;
box-sizing: padding-box;
padding: 3px;
}
#nav li > ul {
display: none;
}
#nav li:hover >ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
display: block;
}
#nav li:hover >ul li {
display: block;
}
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>
More
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
I am hoping that someone could help me out with a css problem that has been driving me crazy all day. I know I'm missing something obvious here, I just don't see it. If you can help that would be greatly appreciated.
Here is the fiddle http://jsfiddle.net/taglegacy/HK7Hy/
And here is the css:
body
{
margin: 20;
padding: 20;
text-align: center;
font: 85% arial, helvetica, sans-serif;
background: #f1f1f1;
color: #444;
}
#container
{
text-align: left;
margin: 0 auto;
width: 700px;
height: 400px;
background: #FFF;
}
/*---NavigationBar---*/
ul
{
font-family: Arial, Verdana;
font-size: 14px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
float: left;
background: #9b1b19;
}
ul li
{
display: block;
position: relative;
float: left;
border-right: 1px solid #fff;
}
li ul
{
display: none;
position:absolute;
left:0;
}
ul li a
{
display: block;
text-decoration: none;
color: #fff;
padding: 5px 15px 5px 15px;
background: #9b1b19;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #af1f1c;
}
li:hover ul
{
display: block;
position: absolute;
background: #af1f1c;
}
li:hover li
{
float: none;
font-size: 11px;
background: #af1f1c;
border-top: 1px solid #fff;
}
li:hover a
{
background: #af1f1c;
}
li:hover li a:hover
{
background: #af1f1c;
}
Here is the HTML:
<body>
<div id="container">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
<li>Submenu 6</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Really Long Submenu 3 Really Long</li>
</ul>
</li>
</ul>
</div>
</body>
The "really long" list item is being cut off because your submenu ul is set to the width of it's parent li. Take out the width: 100% and it'll show the enter text.
Move it so that it only applies to the parent ul to retain the navbar width:
#topnav { width: 100% }
Fiddle
I think, a position:absolute is needed for the 2nd ul. Play around a bit with padding-top and/or top. In the example the padding-top is equal to height of main menu items.
ul#topnav > li > ul {position: absolute; top:0; left:0; padding-top:36px;}
should work, good luck!
I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the main link.
I have been on this for a couple of hours and any help would be greatly appreciated.
Here is the html part :
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>Apetiziers
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Entree
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Main Course
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Dessert
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
And the .css :
ul#menu {
float: left;
margin: 0;
width: auto;
padding: 0px 40px 0px;
background: #333; color: #fff;
line-height: 100%;
}
ul#menu li {
display: inline;
}
/* top level link */
ul#menu a {
float: left;
padding: 10px 16px;
margin-right: 0px;
background: #789; color: #fff;
text-decoration: none;
border-right: 1px solid #e2e2e2;
}
/* main level link hover */
ul#menu a.current {
background: #f60; color: #fff;
}
ul#menu li:hover > a {
color: #fff; background: #ff4500;
text-decoration: underline;
}
/* dropdown */
ul#menu li:hover > ul {
display: block; /* shows the sub-menu (child ul of li) on hover */
}
/* sub level list */
ul#menu ul {
display: none; /* hides the sub-menu until you hover over it */
margin: 0;
padding: 0;
width: 140px;
position: absolute;
top: 35px;
left: 0;
background: #000;
border: solid 1px #ccc;
}
ul#menu ul li {
float: none;
margin: 0;
padding: 0;
}
ul#menu ul a {
font-weight: normal;
background: #9BB3BF; color: #036;
}
/* sub levels link hover */
ul#menu ul li a:hover {
color: #036; background: #DDDF99;
}
If you are free to change the CSS style, why not think of doing something like this. Why not try with this CSS style?
HTML
<ul class="nav">
<li>
Menu 1
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)
If cannot want use : position:relative, then use : left:auto; instead : left:0;
http://codepen.io/anon/pen/KAGhL
But position relative will be usefull and will give ability to set z-index to keep menu on top of other element
It is probably jumping towards the closest relative container. So configure your list to act as relative container:
ul#menu > li {
position: relative;
}
Also there was unnecessary float in your anchor tags, your li are already set to display as inline there is no point in float them
ul#menu a {
display: inline-block;
padding: 10px 16px;
/* ... */
}
Here your fixed code
Try clearing your floats on the parent elements.