I've created a CSS vertical submenu which works fine with the :hover selector to open the submenu's. However, when I try and change this to a :focus selector, it doesn't work. Can anyone tell me what I'm doing wrong? The code is purely CSS and there's no Javascript involved.
nav ul {
margin-top:1px; /* tucks the child ul up close to the parent li */
border-color: blue;
border-width: 10px;
border-style: solid;
width: 150px;
overflow: hidden;
}
nav li {
list-style-type: none;
border-color: aqua;
border-width: 10px;
border-style: solid;
}
nav ul li {
display: none;
border-color: lime;
border-width: 10px;
border-style: solid;
margin:1px;
margin-top:-10px;
margin-left:-10px;
}
nav {
background-color: #c8b99c; /* pale brown */
width: 220px;
margin-left:auto;
margin-right: auto;
}
nav ul li.selected {
background-color: #c18946;
}
nav li a { /* to make the whole box clickable, not just the link text */
display:block; /* <<< this is the bit that does it */
line-height:23px;
text-decoration:none;
border-color: red;
border-width: 3px;
border-style: solid;
}
nav li:hover ul li {
display: block;
}
<!doctype html>
<html lang="en">
<html>
<head>
<title>My Webpage</title>
<link type="text/css" rel="stylesheet" href="nav_style.css">
</head>
<body>
<nav>
<li>Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
<li>Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
</nav>
</body>
</html>
Any ideas?
HTML element li does not receive focus. That is why :focus selector is not working on li elements.
You can fix this by adding tabindex attribute to the li element.
Example:
nav ul {
margin-top:1px; /* tucks the child ul up close to the parent li */
border-color: blue;
border-width: 10px;
border-style: solid;
width: 150px;
overflow: hidden;
}
nav li {
list-style-type: none;
border-color: aqua;
border-width: 10px;
border-style: solid;
}
nav ul li {
display: none;
border-color: lime;
border-width: 10px;
border-style: solid;
margin:1px;
margin-top:-10px;
margin-left:-10px;
}
nav {
background-color: #c8b99c; /* pale brown */
width: 220px;
margin-left:auto;
margin-right: auto;
}
nav ul li.selected {
background-color: #c18946;
}
nav li a { /* to make the whole box clickable, not just the link text */
display:block; /* <<< this is the bit that does it */
line-height:23px;
text-decoration:none;
border-color: red;
border-width: 3px;
border-style: solid;
}
nav li:hover ul li,nav li:focus ul li {
display: block;
}
<!doctype html>
<html lang="en">
<html>
<head>
<title>My Webpage</title>
<link type="text/css" rel="stylesheet" href="nav_style.css">
</head>
<body>
<nav>
<li tabindex="0">Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
<li tabindex="0">Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
</nav>
</body>
</html>
I fixed it. I needed :focus-within, not :focus.
Related
Under my view menu, I am attempting to create a new submenu within a submenu without any sucess. How can the existing CSS code be modified such that the submenu2 under the view menu behaves and looks like all my other sub menus?
Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#menu_container {
width: 100%;
background: rgb(250,252,254);
border: 1px solid rgb(128,128,128);
font-family: Arial;
font-size: 9pt;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
ul#menu li a{
display: block;
text-decoration: none;
padding: 7px 14px;
float:none;
color: rgb(51,51,51);
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:left;
border: 1px solid rgb(128,128,128);
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: rgb(230,240,254);
color: #000;
}
ul#menu li:hover li a {
background: rgb(250,252,254);
color: rgb(51,51,51);
}
ul#menu li:hover li a:hover {
background: rgb(230,240,254);
color: #000;
}
</style>
</head>
<body>
<div id="menu_container">
<ul id="menu">
<li>File
<ul class="submenu">
<li>Close</li>
</ul>
</li>
<li>Edit
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>View
<ul class="submenu">
<li>Submenu 1</li>
<ul><li>Submenu 2</li></ul>
<li>Submenu 2</li>
</ul>
</li>
<li>Logoff</li>
</ul>
</div>
</body>
</html>
You need to make a few changes:
On Html place the "subsubmenu" inside the li and give it the classname submenu :
<li>
Submenu 1
<ul class="submenu">
<li>SubSubmenu 2</li>
</ul>
</li>
And on CSS this:
Show only direct children submenu for each li not all submenus with >
ul#menu li:hover > ul.submenu{
....
}
Make new selector for subsubmenu
ul.submenu li:hover > ul.submenu{
display: block;
position:absolute;
left:100%;
top:0;
border: 1px solid rgb(128,128,128);
}
The demo http://jsfiddle.net/mK7qS/7/
OK this is my piece of CSS code .
So I'm trying to replace the white color from the ul(unordered list) with the black color when I'll be hovering over it.Want to mention that I want the text to be black,when I will hover the box of a li and not the anchor.Thanks.
_____________________________________________________________________________________
body {
width: 1000px;
font-family: Arial;
margin-left: auto;
margin-right: auto;
line-height: 135%;
}
.menu ul {
list-style-type: none;
text-align: center;
background-color: black;
margin-right: auto;
margin-left: auto;
}
.menu ul li {
display: inline-block;;
padding: 10px;
border-style: solid;
border-width: 0 1px 0 1px;
border-color:white;
margin-left:0;
margin-right:-5px;
}
.menu ul li:hover{
background-color: white;
color:black;
}
.menu a {
text-decoration: none;
color:white;
}
.menu a:hover{
color:black;
}
___________________________________________________________________________
// HTML
<!DOCTYPE html>
<html>
<head>
<title>WORKSPACE</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<meta charset="UTF-8">
</head>
<body>
<div class="menu">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Groups</li>
<li>Teachers</li>
<li>Students</li>
<li>Resources</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Instead of making the rule to hover over the a element, change the hover state to the li and target the link.
http://jsfiddle.net/LUguq/
CSS
.menu li:hover a{
color:black;
}
Working Demo Here
just add:
.menu ul li:hover a {
color: black;
}
As you can see in JSFiddle
This pure css dropdown menu works fine in Firefox, Chrome, Safari and Opera, but just shows the list in IE9. It's assumed that it wouldn't work in older versions of IE. It was my understanding IE9 solved the hover, etc. problems with dropdown menus. How do I fix this?Thanks.
The pure CSS is:
body {
background: ;
font-family: Arial Black, Helvetica, sans-serif; font-size: 12px; line-height: 16px;
}
nav {
margin: 0px auto;
text-align: center;
}
nav ul ul {
display: none;
width: 130px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 10px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #377C37;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 5px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5F6975; border-radius: 0px 0px 10px 10px; padding: 0px;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #;
border-bottom: 0px solid #; position: relative;
border-radius: 0px 10px 0px 0px;
}
nav ul ul li a {
padding: 3px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #3BA110;
border-radius: 0px 0px 0px 0px;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
border-radius: 0px 10px 10px 10px;
}
The HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GRH Multi-Level</title>
<meta name="Author" content="George R. Hozendorf" />
<link rel="stylesheet" type="text/css" href="../down_menu_lawsart.css" />
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li><a>Portfolios ▼</a>
<ul>
<li><a>Horses ►</a>
<ul>
<li>Horses I</li>
<li>Horses II</li>
<li>Horses III</li>
<li>Horses IV</li>
<li>Horses V</li>
<li>Horses VI</li>
<li>Horses VII</li>
</ul>
</li>
<li><a>Dogs ►</a>
<ul>
<li>Dogs I</li>
<li>Dogs II</li>
</ul>
</li>
<li><a>People ►</a>
<ul>
<li>People I</li>
<li>People II</li>
</ul>
</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me</li>
</ul>
</nav>
</body>
</html>
I was formatting your code and I realized that you missed the closing </ul> before the </nav>. Verify that
I tried your code and with the "Modernizr Library" add/include to your code everything works fine. Even using IE8 http://modernizr.com/
<script type="text/javascript" src="modernizr.js"></script>
You have used html5 element which doesn't support ie old version. If you want to support html5 element in ie older version then just used following js in your html file withing head tag.
<script type="text/javascript">
document.createElement("nav");
</script>
I'm trying to use the pseudo class ( img:nth-child) in this project but I can't make it work (it's the last line in the css-part). Right now I'm just using the a simple function just to see how it works. The plan is to implement this pseudo class to add a right-border every 5th item. You can see the working code here: jsFiddle
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>module e2</title>
<link href="css/e2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class"main">
<ul class="nav">
<li><a class="mainNav" id="car_1" href="#"><p><img class="mainMenuImg" src="img/singel_car.png" />singelCars<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
<ul >
<li class="borders"><img class="" src="http://placehold.it/178x108/" /> <p class=""> Megane coupe cabriolet</p></li>
<li> <img class=""src="http://placehold.it/179x108/" /><p class=""> Megane </p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane coupe </p></li>
</ul>
</li>
<li><a class="mainNav" id="car_2" href=" #"><p><img class="mainMenuImg" src="img/items_car.png" />varebilder<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="car_3" href="#"><p><img class="mainMenuImg" src="img/ze.png" />z.e<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="security" href="#"><p>security </p></a>
</li>
<li><a class="mainNav" id="services" href="#"><p>service</p></a>
</li>
<li><a class="mainNav" id="aboutRenault" href="#"><p>about</p></a>
</li>
<li><a class="mainNav" id="more" href="#"><p>more<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
</ul> <!-- ends #nav -->
</div> <!-- ends main -->
</body>
</html>
-------------------------------------
body { margin: 0; font-size: 12px; line-height: 1.231; font-family:Arial, Helvetica, sans-serif;}
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/* =============================================================================
main
========================================================================== */
.main img{ margin: 0;}
.main{ margin: auto; width: 900px;/* background:url(http://placehold.it/900x500/e67c78);*/}
.nav{ margin:auto; padding:0; list-style-type:none; list-style-position:outside; float: left; background: #CCC; }
.nav li a, .nav li{ float: left;}
.nav li{ position:relative; list-style: none;}
.nav li p{ margin-top: 12px; }
.nav li a{ text-decoration: none; background: #2a2a2a; color: #FFF; }
/*.main #nav .centerText img{ border-left: 1px solid black; border-bottom: 1px solid black; }*/
/*=====================================================================*/
.main a.mainNav, a.mainNav:link, a.mainNav:visited {display: block; height: 49px; background: #282828; border-right: 1px solid #797979; margin-top:0px; text-align:center; color: #fff; text-transform: uppercase; line-height:25px; overflow:hidden; float: left;}
.nav #car_1{ width: 190px; margin-left: 0px; }
.nav #car_2{ width: 190px; }
.nav #car_3{ width: 106px; color: #1f8b95; }
.nav #security{ width: 147px; }
.nav #services{ width: 69px; }
.nav #aboutRenault{ width: 100px; }
.nav #more{ width: 92px; border-right: none; background:#f7b100; }
.nav li .arrowMargin { margin-left: 5px;}
/*main menu images/cars*/
.nav li p .mainMenuImg{ margin-right: 12px; }
/*centering text on images*/
.main .nav .centerText p{ position: absolute; top: 70px; margin-left: 20px; display: solid; font-family: 'Yanone Kaffeesatz', Arial; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.5px; color: black;}
/*main a-tags*/
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
a.mainNav:hover {color:#000; background:#fff;}
a #more:hover{color:#000; background:#f7b100;}
/*==================UNDER LEVELS======================================*/
.nav li ul{ display: none;/** switch: on/off to show the underlevel*/ position:absolute; left:0; top: 100%; margin: 0; padding: 0; width: 900px;}
.nav li:hover ul{ display: block;}
.main .nav li ul li, .nav li ul li a{ float: left; display: inline-block; border-left: 1px solid black; border-bottom:1px solid black; }
.nav li ul li .centerText img:nth-child(5){ border: 1px solid red; !important; } /* THIS LINE DOEST WORK ? DONT KNOW WHY? */
/*==================styling images (li-elements)===========================*/
Right now, your selector is selecting the fifth img inside the .nav li ul li .centerText element. There is only one image in each, so this won't select anything at all. You need to change it to .nav li ul li:nth-child(5n+1) .centerText img. This will select every fifth li in that nav menu, and then add your border to the image within it.
I'm trying to create a page with a navigation bar that has dropdown submenus. Unfortunately, something keeps going wrong: hovering over an option makes the submenu show up over the bar and list the submenu options horizontally.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Toy CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
/* -------------------------MAIN-MENU----------------------- */
#topmenu ul {
margin-left: 0; /* clears default margins */
padding-left: 0; /* clears default padding */
background-color: #036;
color: white;
float: left;
width: 100%; /* creates complete bar */
font-family: arial, helvetica, sans-serif;
}
#topmenu li {
display: inline;
}
/* ----------------------MAIN-MENU-LINKS-------------------- */
#topmenu a {
padding: 3px 10px;
}
#topmenu a:link, #topmenu a:visited {
padding: 0.2em 1em;
background-color: #036;
color: white;
float: left;
border-right: 1px solid #fff;
text-decoration: none; /* removes link underlining */
}
#topmenu a:hover {
color: #fff;
background-color: #369;
}
/* --------------------------SUBMENU------------------------ */
#topmenu li ul {
display: none;
background-color: #69f;
}
#topmenu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#topmenu li:hover li {
float: none;
}
#topmenu li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#topmenu li li a:hover {
background-color: #8db3ff;
}
/* -------------------------------------------------------------------------------- */
.mainbox {
border: 2px solid black;
float: left;
margin: 10px 0px 0px 0px;
min-height: 500px;
padding: 20px;
width: 600px;
}
.mainbox ul li {
width: 500px;
}
.mainbox {
display: none;
}
</style>
</head>
<script>
$(function() {
$('#topmenu li a').click(function(e) {
e.preventDefault();
var tabContent = this.hash;
$(tabContent).show().siblings('.mainbox').hide()
});
});
</script>
<body>
<!-----------–-–-–-–--------TOP-MENU-------------------------->
<div id="topmenu">
<ul>
<li>
Option A
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
<li>A5</li>
</ul>
</li>
<li>
Option B
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
<li>B4</li>
</ul>
</li>
<li>
Option C
</li>
</ul>
</div>
<!-----------–-–-–-–---------OPTIONS-------------------------->
<div id="optiona" class="mainbox">
<h2>Option A</h2>
<p>You've selected Option A. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionb" class="mainbox">
<h2>Option B</h2>
<p>You've selected Option B. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionc" class="mainbox">
<h2>Option C</h2>
<p>You've selected Option C. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
Thanks so much for your help!
#topmenu ul li {
display: list-item;;
}
#topmenu ul li ul {
margin-top:25px !important;
}
Should do the trick...
See it in action
that root of the problem is that
#topmenu li {
display: inline;
}
is cascading, so that the submenu <li/>s are also inline. you should correct it with something like
#topmenu li li {
display: block;
}
and go from there :)