I have the following html code:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="home2"><a class="active" href="#">Home2</a></li>
<li class="home3">Home3</li>
<li class="home4">Home4</li>
<li class="home5">Home5</li>
</ul>
</div>
<div class="post">
<div id="borders">
<ul>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
</ul>
</div>
</div>
and with that I have a css file:
body {
padding-top: 2rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: rgba(0,0,0,0.6);
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
.nav li {
font-size: 20px;
line-height: 30px;
height: 30px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #919191;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
font-size: 20px;
line-height: 30px;
height: 30px;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
}
ul li { position: relative; border:1px solid red; display: inline-block; text-align: center; }
ul { text-align:center; }
And now when I run it in jsfiddle, I see there's a red border around every element. What I want to achieve is to remove the border from the top elements and just use it on the elements from div id = borders. I'm a little bit confused about CSS, because I tried to use the code .borders ui li , but it didn't work well... I thought that's the way how we should call the classes on the webpage? Anyway, could you help me with removing the red border from the top links and leave it only on the words containing "red border"?
Here's the jsfiddle for that http://jsfiddle.net/gfkPG/451/
Thanks!
Use #borders ul li (as # is an id selector, not . – class selector) instead of ul li.
JSFiddle
Your borders is an ID but you're referring to it as a class in your CSS.
Try #borders instead of .borders.
You could use a class here also:
.borders ul li {
border:1px solid red;
}
<div class="borders">
<ul>
<li>red border</li>
</ul>
</div>
Related
Can someone explain me how i need to set the css statements to get the navbar one after another, without any free spaces?
Also it would be handy to know, how i can set the navbar over the whole display, that its automaticly working on different screen resolutions.
I tried finding a solution on w3schools.
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.navbar li {
display: inline;
}
.navbar a {
border: none;
padding: 2px;
margin: 0px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
.button:active {
background-color: #f0a041;
color: #ffff00;
}
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
tr, th {
border: none;
text-align: right;
}
Add the negative margin and your problem will get solved .
Here is the snippet .
just change the css property of the following class .
.navbar li {
display: inline;
margin-right: -0.26rem;
}
This will definitely solve your problem .
Just add float: left to li.
.navbar li {
display: inline;
float: left;
}
Give ul a display: flex, and the a tags a white-space pre:
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
display: flex;
}
.navbar a {
padding: 2px 5px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
white-space:pre;
}
.button:active,
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
I have recently been using tabindex="1" and :focus with divs to make drop down lists in my menu.
But when these drop down lists are clicked they make my links below collapse on themselves, does anyone know why?
Here is the example https://jsfiddle.net/ugjgng5u/4/
When List 1 is clicked all links below shrink and collapse.
<li class=collapse tabindex="1"><a class=red> List 1 </a>
<div class="inside">Content 1....<br>
hi<br>
hi<br>
hi<br>
hi</div></li>
I thought it was to do with clearing the floats after the div? But didn't seem to help.
Thanks!
If I had to guess, it's because the li is inside the menu and you can't detach it. A work around is to make the div absolute.
https://jsfiddle.net/ugjgng5u/7/
HTML
<div id=container>
<div id=top-bar>
<div class=top-links>
<toplinks>
<ul id=menu>
<li><a>A </a></li>
<li class=collapse tabindex="1">
<a class=red> List 1 </a>
<div class="inside">Content 1....
<br> hi
<br> hi
<br> hi
<br> hi
</div>
</li>
<li> <a> C</a></li>
<li><a>B </a></li>
</ul>
</toplinks>
</div>
</div>
</div>
CSS
#container {
background-color: #fff;
max-width: 350px;
z-index: 1;
position: relative;
}
#top-bar {
display: block;
position: relative;
height: auto;
line-height: 1.7;
font-size: 16px;
font: Arial, Helvetica, sans-serif;
}
.top-links li a:hover {
color: #808080;
}
.top-links li ul {
display: none;
}
.top-links li ul li {
display: block;
float: none;
}
.top-links ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
.top-links li > a {
display: block;
font-size: 12px;
font-weight: 600;
height: 44px;
color: #999;
text-decoration: none;
}
li.collapse > a {
cursor: pointer;
display: block;
}
li.collapse:focus {
outline: none;
}
li.collapse > div.inside {
display: none;
}
li.collapse:focus div.inside {
display: block;
}
.inside {
z-index: 10;
position: absolute;
top: 40%;
left: 11%;
background: white;
width: 300px;
padding-left: 20px;
border: 1px solid black;
}
You got some odd choices going on in your JSFiddle.
None-the-less, don't float .indside. Not sure why it's being floated to begin with. When you float and item you take it out of the normal document flow an it no longer takes up space like it did prior to floating. This means the parent element will treat it as if wasn't there.
If you're looking to do a fly-out menu then you should use position: absolute; on the dropdown menu and position: relative; on it's containing element.
Basic fly-out menu below.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 300px;
background-color: #f1f1f1;
}
li {
position: relative;
line-height: 1.5;
}
li:hover {
background-color: #ccc;
cursor: pointer;
}
li:hover > ul {
display: block;
}
li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #eee;
}
<ul>
<li>One</li>
<li>Two
<ul>
<li>Two A</li>
<li>Two B</li>
</ul>
</li>
<li>Three</li>
</ul>
I'm trying to turn off the hover for the current page in a navigation menu.
div.nav {
width: 100%;
padding: 6px;
height: 40px;
}
.nav li {
color: #FFFFFF;
display: inline;
list-style-type: none;
text-align: center;
text-transform: uppercase;
padding: 20px;
margin: 0px;
height: 40px;
}
li.current {
background-color: #424242
}
li.current:hover {
background-color: inherit;
}
.nav li:hover {
background-color: #737373;
<div class="nav">
<ul>
<li class="current">Home</li>
<li>About
</li>
<li>Contact
</li>
<li>Gallery
</li>
</ul>
</div>
Here is the jsfiddle:
https://jsfiddle.net/swordams/jk6z5aqj/
I want the li for home to stay dark and not change on hover. I've tried setting the hover background color to "inherit", but that doesn't work.
Thanks!
You can use the CSS :not() pseudo-class:
.nav li:hover:not(.current) {
background-color: #737373;
}
jsFiddle example
You can use the solution by j08691 but ultimately, the problem with your css is that .nav li:hover is more specific than li.current:hover. Tacking a .nav will do the trick.
.nav li.current:hover {
background-color: inherit;
}
just make the active/current li background color important
li.current {
background-color: #424242 !important;
}
I've created navigation menu for my website. Here's the html: (you can also view the sidebar menu at belairfinishing.com, its the menu on the left.)
<div><img src="../public/images/skystatic.jpg" id="LinkForBannerImage"></div>
<ul>
<li>Proccess Technology</li>
<li>Equipment</li>
<li>Media & Compounds</li>
<li>Parts Cleaners & Dryers</li>
<li>Waste Water Treatment</li>
<li>Precious Metal Recovery</li>
<li>Consulting</li>
<li>Technical Articles</li>
<li>Press Releases</li>
<li>Toolhoning.com</li>
<li>Distributor Log In </li>
</ul>
</div>
Basically what I would like to happen is that when you hover over one of the items, ONLY the items directly before an after that get a red border. So if someone were to hover over Consulting, then Technical Articles and Precious Metal Recovery will have red borders.
I've been looking this up all morning and haven't found anything that works. So far I've tried to use nth-child(-n) and nth-child(n) to get 1 above an 1 below but I can't get that to actually work. Am I messing up the syntax or is their a better solution for this problem?
Thanks for the help!
Using CSS you could only select the next element using the adjacent sibling selector(+), however CSS doesn't have a previous sibling selector.
This could be achieve using jQuery.
$('li').hover(
function() {
$(this).next().find('a').addClass('highlight');
$(this).prev().find('a').addClass('highlight');
},
function() {
$(this).next().find('a').removeClass('highlight');
$(this).prev().find('a').removeClass('highlight')
})
#cssmenu {
text-align: center;
}
ul {
padding: 0;
list-style: none;
white-space: nowrap;
}
li {
display: inline-block;
vertical-align: top;
}
a {
display: block;
text-decoration: none;
width: 130px;
height: 50px;
line-height: 50px;
color: white;
background: #222;
box-sizing: border-box;
}
a:hover {
color: rosybrown;
}
.highlight {
border-bottom: 4px solid rosybrown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<ul>
<li class="active">Home</li
><li>About Us</li
><li>Contact Us</li
><li>Trade Shows</li
><li>Vibratory Workshops</li
><li class="last">Directions</li>
</ul>
</div>
Edit
You could also make it work using CSS alone.
The idea is to add a :before :pseudo-element to a on :hover, if the a is not a descendant of first li and :after :pseudo-element, if the a is not a descendant of the last li.
i.e, li:not(:first-child) a:hover:before, li:not(:last-child) a:hover:after.
In simple words, it won't add the line on the left if the li is the first element and won't add the line on the right if the li is the last element.
body {
margin: 0;
}
#cssmenu {
text-align: center;
margin: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
}
li {
display: inline-block;
vertical-align: top;
}
a {
position: relative;
display: block;
text-decoration: none;
width: 130px;
height: 50px;
line-height: 50px;
color: white;
background: #222;
box-sizing: border-box;
}
a:hover {
color: rosybrown;
}
li:not(:first-child) a:hover:before, li:not(:last-child) a:hover:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
left: -100%;
bottom: 0;
border-bottom: 4px solid rosybrown;
box-sizing: border-box;
}
li:not(:last-child) a:hover:after {
left: 100%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<ul>
<li class="active">Home</li
><li>About Us</li
><li>Contact Us</li
><li>Trade Shows</li
><li>Vibratory Workshops</li
><li class="last">Directions</li>
</ul>
</div>
I have this html for my css menu:
<nav class="clearfix">
<ul class="clearix">
<li>Homepage</li>
<li>Services</li>
<li>Project Gallery</li>
<li>Contact Us</li>
</ul>
Menu
</nav>
nav {
height: 50px;
width: 100%;
background: #F00;
font-size: 14pt;
font-family: Arial;
position: relative;
border-bottom: 5px solid #FFFFFF;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 100%;
height: 50px;
text-align: center;
}
nav li {
display: inline;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #FFFFFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 50px;
}
nav li a {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding-left: 10px;
padding-right: 10px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #000000;
color:#FFFFFF;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
color:#FFFFFF;
background-color: #F00;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
}
}
I am looking for a way to add sub menus and then second sub menus on on the first ones but still keep it as responsive as it is.
How can I do this?
http://jsfiddle.net/EYjnG/
JSFIDDLE DEMO
logic is just simple and have with this code
#submenu,#submenu2,#submenu3{
visibility:hidden; /*turn all the submenus visibility hidden */
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
visibility:visible; /*On hover turn on visibility visible */
}
Complete code :
HTML:
<div id="top_menu"> <!--MAIN MENU -->
<ul>
<li class="first">menu1
<div id="submenu"> <!--First Submenu -->
<ul class="abc">
<li class="second">item1
<div id="submenu2"> <!--Second Submenu -->
<ul class="abc">
<li class="second">item1_1
<div id="submenu3"> <!--Third Submenu -->
<ul class="abc">
<li class="second">item1_1_1</li>
<li class="second">item1_1_2</li>
<li class="second">item1_1_3</li>
</ul>
</div> <!--third Submenu Ends here-->
</li>
<li class="second">item1_2</li>
<li class="second">item1_3</li>
</ul>
</div> <!--Second Submenu Ends here-->
</li>
<li class="second">item2
<div id="submenu2">
<ul class="abc">
<li class="second">item2_1</li>
<li class="second">item2_2</li>
<li class="second">item2_3</li>
</ul>
</div>
</li>
<li class="second">item3
<div id="submenu2">
<ul class="abc">
<li class="second">item3_1</li>
<li class="second">item3_2</li>
<li class="second">item3_3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="first">menu2
<div id="submenu">
<ul class="abc">
<li class="second">item1</li>
<li class="second">item2</li>
<li class="second">item3</li>
<li class="second">item4</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
ul{
padding:10px;
padding-right:0px;
}
li.first{
display:block;
display:inline-block;
padding:5px;
padding-right:25px;
padding-left:25px;
cursor:pointer;
}
li.second{
list-style:none;
margin:0px;
padding:5px;
padding-right:25px;
margin-bottom:5px;
cursor:pointer;
}
#submenu li.second:hover{
background:red;
border-radius:5px;
}
#submenu2 li.second:hover{
background:green;
border-radius:5px;
}
/*********MAIN LOGIC***************/
#submenu,#submenu2,#submenu3{
visibility:hidden;
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
visibility:visible;
}
/**********STYLING SUBMENUS**************/
#submenu{
padding-right:0px;
text-align:left;
position:absolute;
background:white;
box-shadow:0px 0px 5px;
border-radius:5px;
}
#submenu2{
text-align:left;
position:absolute;
left:70px;
top:0px;
background:red;
box-shadow:0px 0px 5px;
border-radius:5px;
}
#submenu3{
text-align:left;
position:absolute;
left:80px;
top:0px;
background:green;
box-shadow:0px 0px 5px;
border-radius:5px;
}
just understand the logic behind this code and you can made as many submenus as you want.
There are many ways to go ahead about this.
I usually hide the sub menu uls with display: none and take them out of the content flow with position: absolute. Give the li containing the sub menu position: relative so that the sub menus are relative to their direct parents, then position the sub menus however you please using the top, right, bottom and left properties. Finally, change the sub menu to display: block through a :hover or whatever.
Here's a bare-bones example of this:
Markup:
<nav>
<ul>
<li><a>Link</a>
<ul>
<li><a>Sub link</a></li>
<li><a>Sub link</a></li>
<li><a>Sub link</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
nav li {
position: relative;
}
nav li > ul {
position: absolute;
top: 100%;
display: none;
}
nav li:hover > ul {
display: block;
}
Here's a pen with this example. It looks like crap but you get the drill.
You can just keep nesting more sub-menus, but you'll probably want to use different positioning for second-and-lower-levels of sub menus.
However, please note that mobile browsers don't really support :hover. At least they don't treat it the same. You shouldn't make your sub menus accessible only on :hover. Consider adding some sort of class name toggle on click with javascript instead.
use hover in css like:
a:hover
or if your div id is "div1":
#div1:hover
I am not 100% sure if your asking how to make the id menu have a menu functionality or just a sub menu for your main nav.
If it is pertaining to a sub menu for your main nav then this will work just fine. If it's for the mobile menu then let me know and I'll work something out for you. (SOLVED)
This fiddle has the sub menu working while still being responsive the entire time. You can style it to your needs but it is a solid start.
nav ul li ul {
display: none;
position: absolute;
width: 100%;
top: 100%;
background: #000;
color: #fff;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
display: block;
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
}
nav ul li ul li:hover {
background: #c1c1c1;
color: #2b2b2b;
}
JSFIDDLE
JSFIDDLE with relative sized sub menu
Here is the mobile navigation working and the biggest problem was you had no jQuery library selected for the fiddle to run off of.
Mobile Nav
HTML
<div id="pull"><span>Menu</span>
</div>
CSS
div span {
color: #FFFFFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 50px;
padding-left: 10px;
padding-right: 10px;
}
I changed the id pull to a div because when it was an anchor tag all of the navs would lose their text color.
I have made a drop-down with a drop-down in it while still being responsive! Take a peak at this jsfiddle.
JSFIDDLE Drop-Down with a nested Drop-Down
Here's my take: http://codepen.io/teodragovic/pen/rmviJ
HTML
<nav>
<input type="checkbox" id="nav-toggle-1" />
<label for="nav-toggle-1" class="pull sub"><a>Menu</a></label>
<ul class="lvl-1">
<li>Homepage</li>
<li>
<input type="checkbox" id="nav-toggle-2" />
<label for="nav-toggle-2" class="sub"><a>Services</a></label>
<ul class="lvl-2">
<li>Service 1</li>
<li>Service 2</li>
<li>
<input type="checkbox" id="nav-toggle-3" />
<label for="nav-toggle-3" class="sub"><a>Service 3</a></label>
<ul class="lvl-3">
<li>Service 3 a</li>
<li>Service 3 b</li>
</ul>
</li>
<li>Service 4</li>
</ul>
</li>
<li>Project Gallery</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
#import "compass";
/* globals */
* {box-sizing:border-box;}
ul {
margin: 0;
padding: 0;
}
input {
position: absolute;
top: -99999px;
left: -99999px;
opacity: 0;
}
nav {
height: 50px;
background: #F00;
font: 16px/1.5 Arial, sans-serif;
position: relative;
}
a {
color: #FFFFFF;
display: inline-block;
text-decoration: none;
line-height: 50px;
padding: 0 20px;
&:hover,
&:active {
background-color: #000000;
color:#FFFFFF;
}
}
/* nav for +600px screen */
ul.lvl-1 {
text-align: center;
#include pie-clearfix;
li {
display: inline;
}
}
ul.lvl-2,
ul.lvl-3 {
position: absolute;
width: 100%;
background: lighten(red, 15%);
display:none;
}
ul.lvl-3 {background: lighten(red, 30%);}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 {
display: block;
}
.pull {display: none;}
/* arrow thingy - crappy positioning, needs tinkering */
.sub {
position: relative;
cursor: pointer;
&:after {
position: absolute;
top: 40%;
right: 0;
content:"";
width: 0;
height: 0;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 6px solid white;
}
}
/* medium-ish nav */
#media screen and (max-width: 600px) {
nav {height: auto;}
a {
text-align: left;
width: 100%;
text-indent: 25px;
border-bottom: 1px solid #FFFFFF;
}
ul > li {
width: 50%;
float: left;
&:nth-of-type(odd) {
border-right: 1px solid white;
}
}
li:nth-of-type(even) ul.lvl-2,
li:nth-of-type(even) ul.lvl-3 {
position: relative;
width: 200%;
left: -100%;
}
li:nth-of-type(odd) ul.lvl-2,
li:nth-of-type(odd) ul.lvl-3 {
position: relative;
width: 200%;
left: 1px;
}
ul.lvl-2 li {background: lighten(red, 15%);}
ul.lvl-3 li {background: lighten(red, 30%);}
}
/* small-ish nav */
#media only screen and (max-width : 480px) {
.pull {
display: block;
width: 100%;
position: relative;
}
ul {
height: 0;
> li {
width: 100%;
&:nth-of-type(odd) {
border-right: none;
}
}
}
#nav-toggle-1:checked ~ ul.lvl-1 {
height: auto;
}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 {
//reverting stuff from previous breakpoint
left: 0;
width: 100%;
}
}
Markup is little modified from original since I find it easier to use classes than general selectors, especially when nesting lists.
It's CSS only (I'm using SASS+compass). :checked pseudo-class are used for toggling menus on and off. I removed link for services assuming that it will be used just for opening sub-menu (content-wise, you could always add something like "all services" in submenu if you want to keep that page in navigation).
Biggest challenge was styling middle breakpoint. Depending on position of parent list item (odd or even), child list is stretched to 200% (because parent is 50% wide) and positioned so it floats from left side. Small bug appears on level 3 regarding width of the list causing color bleed on edges.
Additionaly, display: block and display:none selectors could be replaced with max-height to add some cool css animation effects