i can't figure out why my :hover won't work to change the li color and background color.
I think it worked before i put in display:table-cell and vertical-align:middle
Any help would be MUCH appreciated!!
http://jsfiddle.net/sadaskud/NVLwK/2/
HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li><a href="#">Contact/a></li>
<li>Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</div>
My CSS:
#menu {
background: #03C;
height: 50px;
width: 923px;}
#menu ul {
display: table;
margin:0;padding:0;}
#menu ul a {
text-decoration: none;}
#menu ul li {
text-align: center;
list-style: none;
float: left;}
#menu ul li a {
display: table-cell;
vertical-align: middle;
color: #fff;
width: 120px;
height: 49px;}
#menu ul ul li {
float: none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;}
#menu ul ul li a {
background: #3CB6E8;
color: #333;
border:none;}
#menu li a:hover {
color: #ccc;
background:#1F9BD8;}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;}
There is no hover state for the li.
The goal is for the li that has the submenu to have a hover state, correct?
#menu li:hover,
#menu li a:hover {
color: #ccc;
background:#1F9BD8;
}
Related
here is my problem.
Everything is working except on ie7 (of course).
The dropdown menu don't display.
Do someone know a workaround?
FYI, the doctype is set. (If anybody ask)
Here is my code at the end...
Thanks for your help
<ul class="menu">
<li class="subMenu">
<a style='clear: left;' id='jiraMenu' href="#">JIRA</a>
<ul>
<li>Make a request</li>
<li><a href="#" >View the version</a></li> <!--"https://caedsh03.caecorp.cae.com/secure/StructureBoard.jspa?s=173" !-->
</ul>
</li>
<li>
<a href="#" name="language" >En</a>
</li>
</ul>
CSS
.menu {
margin:0;
padding:0;
border-collapse:collapse;
}
.menu li {
list-style:none;
float: left;
}
.menu li a:link, .menu li a:visited {
display:block;
text-decoration:none;
background-color:#10509e;
padding: 0.5em 2em;
margin:0;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
color:white;
}
.menu li a:hover {
background-color:white;
color: #10509e;
outline:1px solid black;
}
/*style the sub menu*/
.menu li ul {
position:absolute;
display: none;
border-top:1px solid #fff;
margin:0;
padding:0;
z-index: 999;
}
.menu li ul li {
display:inline;
float:none;
width: 100%;
}
.menu li ul li a:link, .menu li ul li a:visited {
background-color:#10509e;
color: white;
width:auto;
}
.menu > li:hover ul {
display: block;
display: table-cell;
}
.menu li ul li a:hover {
background-color:white;
color: #10509e;
}
display: table-cell is not supported in IE7. Removing it should solve the problem.
http://jsbin.com/ugIfAJi/1
I have dropdown menu (css only)
JSFIDDLE:
>>> jsfiddle <<<
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML
<ul>
<li>HTML 4 and less
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
</ul>
</li>
<li>HTML 5</li>
</ul>
</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
CSS:
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
white-space:nowrap;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: blue;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
background: green;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: red;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
As you see at last submenu, they are not as upper menus. They wrap text and shrink (minimal width).
Q:
How to make them equal (same width as parent) and no text wrap ?
How to simplify this menu (parent, children, ul > li etc.) so I don't need to make new style for each new sub-menu
Thank you in advance.
Try this - this works great on Chrome:
* { white-space: nowrap; box-sizing: border-box; }
.menu {
margin: 100px auto;
text-align: center;
}
/* ULs */
.menu ul {
padding: 0;
position: absolute;
display: none;
background: green;
top: 0;
position: absolute;
list-style: none;
}
.menu > ul {
background: #efefef;
position: relative;
display: inline-table;
}
.menu > ul > li > ul {
top: 100%;
}
.menu li:hover > ul {
display: block;
}
.menu ul ul ul {
left: 100%;
border-left: 1px solid white;
top: -1px;
}
/*LIs*/
.menu li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu > ul > li {
float: left !important;
border: none;
}
.menu ul li:hover {
background: blue;
}
/* As */
.menu a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu li:hover a {
color: #fff;
}
.menu ul ul a:hover {
background: red;
}
Also, consider this isn't a good practice (User-experience-wise) to have so many sub menus. You should attempt to re-design your UI to match the usage of your website in a way that won't make the user frustrated.
I've created a css menu and submenu using style sheet.
the code and style sheet is as follows
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#navdiv
{
border: 1px solid black;
text-align:center;
background:#FF0000;
border-radius: 10px;
width: 50%;
margin: 10px;
}
nav ul ul
{
display:none;
width:auto;
}
nav ul li:hover >ul
{
display:block;
}
nav ul
{
background: #ff0000;
padding: 0px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform:uppercase;
}
nav ul li
{
float:left;
background: #ff0000;
border: 0px solid black;
}
nav ul li:hover
{
background: #DDDDDD;
}
nav ul li a
{
display:block;
padding: 10px 25px;
text-decoration: none;
color:#FFFFFF;
}
nav ul li:hover a
{
color:#000000;
}
nav ul ul
{
background: #ff0000;
position: absolute; top: 100%;
}
nav ul ul li
{
float: none;
border: 1px solid #000000;
position: relative;
color:#FFFFFF;
}
nav ul ul li a
{
background-color: #FFFFFF;
color: #FFFFFF;
}
nav ul ul li a:hover
{
background: #000000;
color:#FFFFFF;
}
nav ul ul ul
{
position: absolute; left: 100%; top:0;
}
</style>
<div id="navdiv">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
</div>
I want to change the color of submenu (i.e Photoshop, illustrator, web design in my example)
I'm able to change the background color using
css
nav ul ul li a
{
background-color: #FFFFFF;
color: #FFFFFF;
}
But i'm not getting why the font color is not getting change?
Please help me with the problem
try to Add a:visited instead of just a to the CSS selector.
nav ul ul li a, nav ul ul li a:visited
Just add a:visited instead of anchor tag
eg:nav ul ul li a, nav ul ul li a:visited
The easiest way to get this is as below:
nav ul ul ul li,
nav ul ul li
{
background-color: #FFFFFF;
color: #FFFFFF;
}
Try this it will resolve your issue, please share I can help you with more options.
Hey I am trying to make the:
ul ul li a in a nav color #FFF
but no matter what I do I can not change it I think it may be that the:
ul li a is affecting it however that's #FFF to?
My goal is white text on a dark background and then black text on a white hover.
here is my code so far:
CSS:
nav ul ul li
{
background: #4a4a4a;
float: none;
position: relative;
color: #FFF;
}
nav ul ul li a
{
color: #FFF;
padding: 10px 51px;
}
nav ul ul li a:hover
{
background: #FFF;
color: #000;
}
HTML:
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Our Prices</li>
<li>Web Design
<ul>
<li>Portfolio</li>
<li>Pricing</li>
</ul>
</li>
<li>Consulting</li>
<li>Quick Hire</li>
</ul>
</nav>
Any help would be great thanks :).
I think you are trying to achieve the same here:
JSbin Demo
nav ul ul li
{
background: #4a4a4a;
float: none;
position: relative;
color: #FFF;
}
nav ul ul li a
{
color: #FFF;
padding: 0px 51px;
}
nav ul ul li:hover
{
background: #FFF;
}
nav ul ul li:hover a
{
background: #FFF;
color: #000;
}
nav ul ul li a:hover
{
background: #FFF;
color: #000;
}
In all likelyhood, these are URLs you've already visited, which causes the browser to display them in different colours.
Add a:visited instead of just a to the CSS selector.
nav ul ul li a, nav ul ul li a:visited
In the following example - Is it possible to retain the border on the top level navigation when hovering on the sub elements? I would like to retain the black border on 'About Us' when hovering on its sub items. Example: http://jsfiddle.net/6zKRC/2/
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li a:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
}
.navigation li:hover li {
float: none;
font-size: 11px;
}
.navigation li:hover a {
background: #CCC;
}
.navigation li:hover li a:hover {
background: #CCC;
border:0;
}
Hi i have made some changes in your css please check your updated css :-
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
left:-1px;
}
.navigation li:hover ul li {
float: none;
font-size: 11px;
background: #CCC;
}
.navigation li:hover li:hover {
background:#e6e6e6;
border:0;
}
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
I hope you looking this one:- http://jsbin.com/uwemuy/5/edit
change in css as follow
.navigation li:hover a {
background: #CCC;
border:solid 1px black;
}
see http://jsfiddle.net/6zKRC/2/