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.
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 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 have created a dropdown list using css. The drop down list works perfect, opening the menu to down. How can I modified in order to open the menu to up (opposite direction)? make something like drop up list.
This is my html code.
<div id="menu">
<ul>
<li> <?php echo $user_data['name']; ?>
<ul>
<li>Logout</li>
<li>Change Password<li>
<li>Settings<li>
</ul>
</li>
<li> Profile
<ul>
<li>Edit Profile</li>
<li>View Profile</li>
</ul>
</li>
<li> Home </li>
</ul>
</div>
and this is my css.
#menu ul{
padding:0px;
margin:0px;
list-style:none;
}
#menu ul li {
float:left;
}
#menu ul li a:hover{
background:#fff;
color:#333;
}
#menu ul li ul{
position:absolute;
height:0px;
overflow:hidden;
}
#menu ul li ul li{
float:none;
}
#menu ul li:hover ul{
overflow:visible;
}
#menu ul li:hover ul li a{
padding:10px;
}
#menu ul li ul li a{
-webkit-transition:0.3s;
-moz-transition:0.3s;
padding: 0px 10px;
}
http://codepen.io/bjornmeansbear/pen/MwGYZL
The following CSS should help you — it incorporates the "drop-up" and also cleans up a few other things...
#menu {
margin-top: 100px;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu > ul > li {
float: left;
margin: 10px;
position: relative;
}
#menu a { display: block;}
#menu a:hover {
background: #fff;
color: #333;
}
#menu ul li ul {
position: absolute;
height: 0px;
width: 250%;
overflow: hidden;
}
#menu ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
#menu li li a {
padding: 5px 10px;
}
#menu a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
padding: 0px 10px;
}
Basically, if you position the <li> that houses the child <ul> relatively, you can use the absolute position of the <ul> to position it anywhere based directly on its the parent... does that make sense?
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;
}
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