When I define an .active class for an ordered list item, the item number is not styled.
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
How to style the number together with the item?
Need to add some css and css counter
ol {
list-style: none;
counter-reset: item;
}
li {
counter-increment: item;
margin-bottom: 5px;
}
li:before {
content: counter(item) ".";
width: 15px;
margin-right: 5px;
text-align: center;
display: inline-block;
}
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
Use list-style-position: inside
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
}
ol {
list-style-position: inside
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
font-size: 1.5em;
color: red;
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
Related
The above one is just a ul and li, i have added column count on ul. On hovering <a> tag it shows half in first column and another half in second column.
I have tried
display: inline-block;
display: block;
But i am getting same result. My code is below.
HTML
<ul class="classname">
<li>Column 1 - 1</li>
<li>Column 1 - 2</li>
<li>column 2</li>
<li>column 3 - 1</li>
<li>column 3 - 2</li>
<li>column 4</li>
</ul>
css
.classname {
-webkit-column-count: 4;
-moz-column-count: 4;
-o-column-count: 4;
column-count: 4;
}
.classname li {
font-size: 15px;
color: black;
display: block;
margin: 0px;
}
.classname li a {
display: block;
padding: 6px 10px;
font-size: 13px;
color: #444;
letter-spacing: 0.5px;
}
I think you need to play around break-inside: avoid-column;:
.classname {
-webkit-column-count: 4;
-moz-column-count: 4;
-o-column-count: 4;
column-count: 4;
}
.classname li {
font-size: 15px;
color: black;
display: block;
margin: 0px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
.classname li a {
display: block;
padding: 6px 10px;
font-size: 13px;
color: #444;
letter-spacing: 0.5px;
}
li:nth-child(even) {
background: teal;
}
<ul class="classname">
<li>Column 1 - 1</li>
<li>Column 1 - 2</li>
<li>column 2</li>
<li>column 3 - 1</li>
<li>column 3 - 2</li>
<li>column 4</li>
</ul>
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.