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
Related
I am new in coding css, tried suggested answers related to my problem but nothing works, any help will be appreciated; I want to place my menu at the center of the page while retaining the container background covered the entire available width...
here is my html code:
<div id="nav">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Mission</li>
<li>Board of Directors</li>
<li>Location</li>
</ul>
<li>Facilities & Services
<ul>
<li>Services >>
<ul>
<li>Internal Medicine</li>
<li>OB-Gyne</li>
<li>Pediatrics</li>
<li>Surgery</li>
<li>Dental Care</li>
<li>Rehabilitation Medicine</li>
<li>Otorhinolaryngology(ENT)</li>
</ul>
<li>Facilities >>
<ul>
<li>Laboratory-Tertiary Level</li>
<li>Intensive & Critical Care</li>
<li>Nursery & Neonatal Care</li>
<li>Pediatric Intensive Care</li>
<li>Pulmonary Care</li>
<li>Ear Care Center</li>
<li>Hemodialysis Unit</li>
<li>Cardiac Diagnostics</li>
<li>Radiology Diagnostics</li>
<li>OB-Gyne Diagnostics</li>
</ul>
</ul>
</li>
<li>Healthcare Plans
<ul>
<li>Accredited HMOs</li>
<li>Executive Checkup</li>
<li>Credit Cards</li>
</ul>
</li>
<li>Doctors
<ul>
<li>""</li>
</ul>
</li>
<li>Careers</li>
<li>Archive</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
and my css code:
#nav {
Z-INDEX: 10;
text-align:center;
width: 100%;
height: 20px;
background: green;
position: relative;
padding:3px;
font-size: 13px;
list-style-type:none;
list-style-position:outside;
display:inline-block;
font-weight: bold;
line-height:1.5em;
float: none;
}
#nav-wrapper {
text-align: center;
}
#nav ul{
Z-INDEX: 10;
text-align:center;
position:relative;
width: 1000px;
display:inline-block;
margin:0;
padding:0;
background: none;
list-style-type:none;
list-style-position:outside;
line-height: 1.7em;
font-size: 13px;
float: none;
}
#nav li li{
Z-INDEX: 10;
text-align:left;
display:inline-block;
margin:0;
padding:0;
font-weight: normal;
list-style-position:outside;
border-bottom: 0.1em solid white;
color: #fff;
}
#nav a:link, #nav a:visited{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
background: green;
}
#nav ul a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
position: relative;
}
#nav li ul a:hover{
Z-INDEX: 999;
background: green;
color: yellow;
position: relative;
}
#nav li li a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
font-weight: bold;
position: relative;
}
#nav li a:hover{
background: light-green;
color: yellow;
Z-INDEX: 999;
position: relative;
}
#nav a:active{
color: yellow;
font-weight: bold;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:14em;
top:1.3em;
display:none;
}
#nav li ul a{
width:14.65em;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:14.65em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
You could wrap the #nav with another div.
<div id="wrap">
<div id="nav"></div>
</div>
Remove the width from #nav, and apply the following CSS:
#wrap {
background: green;
text-align: center;
}
jsFiddle here - it works.
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.
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;
}
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/
I have tried moving the position:relative; setting around, but to my understanding it is where it is supposed to be... Please correct me, because my understanding is clearly wrong!
<ul id="menu">
<li>All Products
<ul>
<li>Stock Lanyards</li>
<li>Screen Printed Lanyards</li>
<li>Full Color Lanyards</li>
<li>Custom Cord Lanyards</li>
<li>Specialty Lanyards</li>
</ul>
</li>
<li>Reorders</li>
<li>Resources
<ul>
<li>FAQ</li>
<li>Art Requirements</li>
<li>Production Times</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Request A Sample</li>
</ul>
</li>
<li>Blog</li>
</ul>
css....
ul#menu {
margin:0px;
padding-top:20px;
position:absolute;
right:0px;
font-weight:bold;
font-size:14px;
}
ul#menu li {
display:inline;
padding-left:8px;
}
ul#menu a{
color:#8ba693;
text-decoration:none;
padding:5px;
}
ul#menu a:hover, a:active{
/* text-shadow: 0 0 0.9em #ccc;
text-decoration:underline; */
background-color:#000;
}
/* -- DROPDOWN MENU STYLES -- */
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
position: relative;
left:0;
top:100%;
}
#menu li ul { display: none;
position: absolute;
z-index:1000;
margin:5px 0 0 0px;
top:100%;
left:0;
}
#menu ul li a {
display: block;
text-decoration: none;
padding: 7px 15px 6px 10px;
margin: 0px 0 0 0;
white-space: nowrap;
border-top: 1px solid #8ba693;
border-left: 1px solid #8ba693;
border-right: 1px solid #8ba693;
}
#menu ul li a:hover { background: #000; }
#menu li:hover > ul {
display: block;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #fff; }
#menu li:hover li a:hover { background: #8ba693; color: #fff; }
ul#menu li {
display: inline;
padding-left: 8px;
position: relative;
}
http://jsfiddle.net/HFp6K/2/
position:relative needs to be in position:absolute's parent.