In my drop-down menu the font colour of "li" is white and while "hover" the colour change to black and i have drop-down menu also .When hover the sub menu of my products link, the font colour products(li) changing to white my hover background is also white, here my question, how can I keep the colour of my "li" as black ??
my stylesheet
#menu{width:auto; margin: 0px 0px 0px 0px; background-color: #000; height:32px; float:right; border-radius:0px 0px 10px 10px ;}
#menu ul{list-style-type:none; margin:0px; padding:0px; margin-left:10px;}
#menu ul li{float: left; position: relative; margin-left:0px; height:29px; padding-top:3px;}
#menu ul li:active {color:#000;}
#menu ul li:hover{background-color: #f5f5f5; margin-left:0px; color:#000}
#menu ul li a{color: #fff; padding: 0 16px; line-height:25px; font-size:13px; font-family:arial; display: block; text-decoration:none; margin-left:0px;}
#menu ul li a:hover{background-color: #f5f5f5; margin-left:0px; color:#000;}
#menu ul li ul li{float: none; position: relative; margin-left:0px;}
#menu ul li ul{position: absolute; top:32px; left:0; display: none; background-color: #000; width:150px; margin-left:0px;}
#menu ul li:hover > ul{display: block; margin-left:0px; color:#000;}
#menu ul li ul li a{white-space: nowrap; line-height:25px; margin-left:0px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px; margin-left:0px;}
my html code
<div id="menu">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Product
<ul>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
</ul>
</li>
<li>Other Services</li>
<li>Contact Us</li>
</ul>
</div>
Add the following CSS:
#menu ul li:hover > a {
color: #000;
}
The problem was the anchor tag. No matter what color would you set for the li, the anchor tag has style color: #fff.
Related
I am building my website.
I am pretty new to CSS and i have 2 question.
I managed to make a drop down menu which satisfy me. The problem is that:
1)I want the white margin bottom bar when i mouseover a the 1st group of link inside the box instead than outside. I know there is a command to achieve this, but i need to fix width and height which I don't want.
2) I want the second ul element to be showed like a table with 2 column and a title for each column that is a link in bold. I can't understand why each link has it's own box around him even if i use inline.
THis is my HTML:
<div id="menu">
<ul>
<li>Ispirazioni</li>
<li>Chi Siamo
<ul>
<li>La Storia</li>
<li>Oggi</li>
</ul>
</li>
<li>Articoli
<ul>
<li>Articoli in promozione</li>
<li>Catalogo ></li>
</ul>
</li>
<li>Contatti</li>
</ul>
And this is my CSS:
#menu {
clear:both;
width:100%;
height:64px;
text-align: center;
top:40px; /* I want the menu bar follow the scroll*/
position:fixed; /*and it stay 40px from top */
background: rgba(89,89,172,0.7); /*I want the background is transparent*/
}
#menu ul li{
position:relative; /*I want the menu element is displayed in ROW*/
display:inline;
}
#menu ul li a{
text-decoration:none;
display:inline-block; /*menu element is separated by 20px*/
padding:20px;
}
#menu ul ul{
display: none; /*menu is hidden*/
position:absolute; /* position depends from the first ul*/
margin:0;
padding:0;
text-align:left;
}
#menu ul ul li{
display:inline; /*my submenu width*/
width:300px
}
#menu ul ul li a{
width:300px;
padding:2px;
font-size:12px;
}
#menu ul li:hover ul {
display: block;
}
#menu ul li:hover ul a{
text-decoration:none;
background:rgba(89,89,172,0.7);
}
#menu ul li:hover > a{
color:blue;
border-bottom: 10px solid #CCC; /* border bottom, i want inside*/
}
#menu ul li:hover ul a:hover{
color:blue;
border-bottom:none;
}
Sorry if my code is poor but i justy started css.
http://jsfiddle.net/ZjLdK/
Here is a fiddle, the white bar that appear when i mouseover the link is outside the box, and i want it inside. And then i want 2 column with clickable link, not a box for each sublink.
And the background always trasparent
THank you so much!
Is this what you were thinking of having done? css:
ul {
position:fixed;
top:40px;
text-align: center;
display: inline;
margin: 0;
list-style: none;
width:100%;
background: rgba(89,89,172,0.7);}
ul li {
display: inline-block;
margin-right: -4px;
padding:0px;
position: relative;
width:20%;
cursor: pointer;}
ul li:hover {
background: #555;
color: #fff;}
ul li ul {
text-align: left;
display: inline;
margin: 0;
opacity: 0;
width:700px;
position:absolute;
top:100%;
left:0px;
visibility: hidden;
list-style: none;}
ul li ul li {
display: inline-block;
width: 300px;
position: relative;
margin:0;
padding:0;
background: #fff;
cursor: pointer;}
ul li ul li:hover {
background:rgba(89,89,172,0.7); }
ul li:hover ul {
opacity: 1;
visibility: visible;}
html:
<ul>
<li>Ispirazioni</li>
<li>Chi Siamo
<ul>
<li>La Storia</li>
<li>Oggi</li>
</ul>
</li>
<li>Articoli
<ul>
<li>Articoli in promozione</li>
<li>Catalogo ></li>
</ul>
</li>
<li>Contatti</li>
</ul>
And here's the fiddle
http://jsfiddle.net/aNVam/230/
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 want to make a small website for myself and so I ask this question as a beginner. I cannot succeed to have the submenu contain another background when hovering the main menu.
HTML:
<div id="nav">
<ul class="sub1">
<li><h2>Home</h2></li>
<li><h2>About</h2><!---id="onlink"--->
<ul class="sub2">
<li>Us</li>
<li>Our product</li>
</ul>
</li>
</ul>
</div>
CSS:
#nav{
width:100%;
height: 60px;
padding-top: 20px;
padding-bottom: 10px;
}
#nav ul{
margin:0;
padding:0;
width: 60%;
margin: auto;
}
#nav ul li{
margin:0;
padding:0;
list-style: none;
float:left;
position:relative;
background:transparent url(EN/Button_menu_unselected.png);
}
#nav ul li ul li{
background:aqua; /*Test that doesn't work*/
}
#nav ul li a{
text-align:center;
text-decoration:none;
height:20px;
width:100px;
padding:10px;
display:block;
color:#003300;
}
#nav ul ul{
position:absolute;
visibility:hidden;
}
#nav ul li:hover ul{
visibility:visible;
}
#nav ul li:hover a{
background-image: url(EN/Button_menu_rollover.png);
}
The drop down items get the same format as the button called "Button_menu_rollover", which gives me a very bad result.
The code:
#nav ul li:hover a{
background-image: url(EN/Button_menu_rollover.png);
}
is applied to all elements and sub-elements.
This fixes it, but this code does not work on IE6:
#nav ul li:hover > a{
background: #fff;
}
Or you may use Javascript for HOVER effect to get exact results.
I'm trying to center my css dropdown menu, but I can't seen to get it to work! I've tried adding text-align: center and margin-left: auto; margin-right: auto, but all that gets centered are the dropdown li-items. How is this done?
Here's the css:
.bg {background-color: #008503;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:30px; background-color: #1e52b8; position:relative; font-family: Helvetica, Verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:30px; line-height:33px; color:#FFF; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:30px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background-color: #008503;}
.menu li a.top_link:hover span {background-color: #008503;}
.menu li a.top_link:hover span.down {background-color: #FF0000;}
.menu li:hover > a.top_link {color:#FFF; background-color: #008503;}
.menu li:hover > a.top_link span {background-color: #008503;}
.menu li:hover > a.top_link span.down {background-color: #FF0000;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:0; top:30px; right:2px; background: #fff; padding:3px 0; border:1px solid #008503; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#1e52b8; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}
And here's the html:
<div style="width: 980px"> <!-- container -->
<ul class="menu">
<li class="top"><span>Introduction</span></li>
<li class="top"><span>About us</span>
<ul class="sub">
<li>Sample Menu This is some longer text</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li class="top"><span>The island</span>
<ul class="sub">
<li>Sample Menu This is some longer text</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li class="top"><span>Hotels</span></li>
<li class="top"><span>Tours</span></li>
<li class="top"><span>Reservation</span></li>
<li class="top"><span>Contact us</span></li>
</ul>
</div>
Since you are using float, the only way to center it is to apply a width to the containing element and use margin-left: auto; margin-right: auto. There is no way to do this will retaining the flexible width.
An alternative to float would be display:inline-block; These can be centered using text-align:center, but you'll have to rework the css.
Well, here's one way to do it, you can put a div container around the menu...
#menuContainer{margin: auto;}
<div id='menuContainer' style="width: 980px">