am doing a HTML website, and I have a main menu - Home, About etc.
I have several html pages and for each page I want the menu li to change color to #E38400.
Here is my code:
<div id="nav">
<ul>
<li class="youarehere"><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
</ul>
</div>
and my style.css code:
.header #nav ul li .youarehere {
background:#E38400; border-radius:5px; color:#FFF;
}
but the first list item still shows the same color etc. I want to use neither jQuery nor any other script, but why is this not working?
you just need to remove li or place .youarehere just with li without space :
.header #nav ul li.youarehere {
background:#E38400;
border-radius:5px;
color:#FFF;
}
Hi now your define in your css this .header #nav ul li .youarehere but actually you define this .header #nav ul li.youarehere because your apply to this class in li .
as like this
.header #nav ul li.youarehere {
background:#E38400; border-radius:5px; color:#FFF;
}
=================================
Demo
#nav ul li.youarehere {
background:#E38400; border-radius:5px; color:#FFF;
}
<div id="nav">
<ul>
<li class="youarehere"><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
<li><h3>menuITEM</h3></li>
</ul>
</div>
Remove the space between li and .youarehere
like this -
.header #nav ul li.youarehere {
background:#E38400; border-radius:5px; color:#FFF;
}
Related
Looking to find out how to change a single nav link to have a different background hover color than the others.
I've tried #nav #contact.hover and #nav #contact:hover to no avail.
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
</html>
CSS:
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li a:hover {
background-color:black;
}
Should change the contact element in the nav to have a background hover color of white
Just have to get the selector right. I think you were having issues because your base style for hover is overly specific which trumps most overrides.
#nav ul li:hover a
...could easily be changed to simpler selector that would be easier to override, the use of ID's instead of classes adds to the specificity issue as well.
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li:hover a {
background-color:black;
}
#nav ul li#contact:hover a {
background: url('https://picsum.photos/100');
}
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
You can accomplish this by using the :last-child psuedo-class in your CSS.
Here's a codepen with the fix but I'll describe below what I did: https://codepen.io/Athys/pen/WBdYdZ
I added :last-child to the li selector since the "contact" link appears as the last list item (the last li). Then, I added a :hover psuedo-class to the a selector and give it a different hover color and text-color than the other a elements. Hope this helps.
I'm working on a dropdown box but the only thing that doenst want to work is when I hover over the word Info in the unordered list the dropdownbox is not displayed.
I know I have display:none; in ul style but can you change that to display:block; when hovered over the word info?
HTML Code:
<ul id="Menu">
<li>Home </li>
<li>Info
<ul style="display:none;">
<li>Program</li>
<li>Getting Started<li>
<li>Credits</li>
</ul>
</li>
<li>Video </li>
<li>server </li>
<li>Profile </li>
<li>Help</li>
</ul>
CSS Code:
#Menu {
list-style:none;
font-size:16px;
font-weight:Bold;
padding:14px 0 0;
width:415px;
margin-top:0;
float:left;
margin-left:0;
}
#menu { list-style:none;}
li:hover > ul {display:list-item;}
li ul { margin:0; padding:0; position:absolute;z-index:5;padding-top:6px;}
li { float:left; margin-left:10px; }
li ul li { float:none; margin:0; display:inline;}
li ul li a {display:block; padding:6px 10px; background:#333; white-space:nowrap;}
li { display: list-item; text-align: -webkit-match-parent;}
ul { border:0; font-size:100%; font:inherit;vertical-align:baseline;}
Help in advanced. any help is apreciated :)
also post a code not only telling me whats wrong thanks!
use #Menu before your css class names : DEMO
like: #Menu li:hover > ul {display:list-item;}
NOTIC: css Class names are Case-Sensitive
I am thinking this is because the html code contains an inline display:none.
In the inner <ul>, we should remove <ul style="display:none;"> in the above html.
Original Question
I have a webpage with a css menu. The problem is that the menu is displaying properly except for menu items wit a submenu. I this case the menu items not displaying consistently and the the submenu is not showing at all.
I have uploaded the page at http://prova.webuda.com/account.html. Such a problem occurs with the menu item ACCOUNT.
Also, I have looked at it with firebug and I have seen that the relavant submenu unsorted list is grayed out, which makes me suppose that there must be some parsing issue. However, from my analysis it should be fine.
What am I doing wrong? Can somebody please help me?
Edit
Css
#mainMenu
{
font-size: 0.85em;
}
#mainMenu ul
{
margin: 0;
padding: 0;
text-transform: uppercase;
}
#mainMenu ul li, #mainMenu ul li:hover
{
height:50px;
float:left;
text-align:center;
font-weight:bold;
font-size:1.7em;
overflow:hidden;
margin-left:1.05em;
margin-right:1.05em;
}
#mainMenu ul li a, #mainMenu ul li span a
{
color:brown;
text-decoration:none;
color:#006;
}
.mainSubMenu
{display:none;}
#mainMenu ul li:hover #mainMenu ul li ul{display:block;}
#mainMenu ul li ul{position: absolute;left:-1px;top:98%;}
#mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}
#mainMenu ul ul{
width:119.7px;
}
Html
<div class="mainMenu" id="mainMenu">
<ul>
<li class="menuItem" id="menuItem1"> Squadra </li>
<li class="menuItem" id="menuItem2"> Biglietti </li>
<li class="menuItem" id="menuItem3"> Abbonamenti </li>
<li class="menuItem" id="menuItem4"> Ritiro </li>
<li class="menuItem" id="menuItem5"> Fidelity Card </li>
<li class="menuItem" id="menuItem7"> <span> Account </span>
<ul class="mainSubMenu">
<li class="subMenuItem"><a class="pureCssMenui" href="profilo.html">Profilo</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="datiFatturazione.html">Dati Fatturazione</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="storicoTifoso.html">Storico Tifoso</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="esci.html">Esci</a></li>
</ul>
</li>
</ul>
</div>
Most significantly the part which is not working is #mainMenu ul li:hover #mainMenu ul li ul{display:block;}
There are a few issues with your CSS. First, the # selector only works for elements that have the id set to that. For example, #menuItem applies styling to any element with id="menuItem". However, your HTML has class="menuItem", so you must use the . selector instead.
Second, when the menu does appear, it appears too far down the page for the user to see, as per #mainMenu ul li ul{position: absolute;left:-1px;top:98%;} and #mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}.
Here are the corrections:
.mainMenu
{
font-size: 0.85em;
}
.mainMenu
{
margin: 0;
padding: 0;
text-transform: uppercase;
}
.mainMenu ul li, .mainMenu ul li:hover
{
height:50px;
float:left;
text-align:center;
font-weight:bold;
overflow:hidden;
margin-left:1.05em;
margin-right:1.05em;
}
.mainMenu ul li a, .mainMenu ul li span a
{
color:brown;
text-decoration:none;
color:.006;
}
.mainSubMenu
{display:none;}
.mainMenu:hover .mainSubMenu {display:block}
.mainMenu ul li ul{position: absolute;left:1px;top:2%;}
.mainMenu ul ul ul{position: absolute;left:2%;top:2px;}
.mainMenu ul ul{
width:119.7px;
}
And a working fiddle: http://jsfiddle.net/Af7SE/
Also, here is another example of a menu like yours.
The first problem is because your last <a> is nested on a <span>, try using:
<li class="menuItem" id="menuItem7">
Account
<ul class="mainSubMenu">
....
</ul>
</li>
And your menu never show because has a problem with the overflow:hidden; and the static width on your submenu, try using the next code, it will show your submenu but you will need make more changes.
#mainMenu ul li:hover ul{display:block;}
instead of
#mainMenu ul li:hover #mainMenu ul li ul{display:block;}
remove all the overflow:hidden because it hide your submenu, I make some modifications for the example:
http://jsfiddle.net/NrA8A/
#mainMenu ul {
margin: 0;
padding: 0;
text-transform: uppercase;
list-style: none; /*remove the bullets*/
}
#mainMenu ul li, #mainMenu ul li:hover {
.....
/*Remove the overflow :hidden*/
}
I am working on a HTML/CSS drop down menu and now whenever I hover my mouse over the top of the menu not every entry is showing in the drop menu. The top one or two entries are always missing. Here is my HTML:
<!-- Navigation Bar -->
<ul id="navi">
<li>Engines
<ul>
<li>DiniJS</li>
<li>Foxen2D</li>
<li>Vivon3D</li>
</ul>
</li>
<li>Team
<ul>
<li>Rob Myers</li>
<li>Nate Mast</li>
</ul>
</li>
<li>Contact
<ul>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
and here is the CSS:
#navi ul {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
float:left;
width:120px;
padding-top: 13px;
padding-bottom:8px;
background-color:black;
text-align:center;
font-family:"Courier New";
}
#navi li:hover {
background-color:#303030;
}
#navi li ul li {
float:none;
width:116px;
text-align:left;
padding-left:4px;
border-top:1px solid #303030;
display:none;
font-size:85%;
position:absolute;
z-index:2;
}
#navi li:hover ul li {
display:block;
}
#navi a {
text-decoration:none;
color:red;
}
I am open to any Javascript or JQuery suggestions if that is a better way to go about fixing this. Thank you.
Your problem is that all of the submenu items are stacking one on top of another. Simply moving position: absolute; from the #navi li ul li block to a new #navi li ul block should fix this.
When using nested list items. use class names to target. for your menu use class="sub"
for submenu (ul) and set display none and absolute for the sub ul and not for the li.
I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code)
when hover is fired. I'm badly stuck here, please help me out.
I also tried the visibility property instead of display. I could see only
menu1, menu2, menu3 in browser horizontally and nothing else.
I'm using IE7 on XP SP3.
CSS:
#navMenu ul{
argin:0;
padding:0;
}
#navMenu li {
margin:px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li : hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
HTML:
<div id="wrapper" >
<div id="navMenu">
<ul>
<li>menu1
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu2
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu3
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</ul>
</div>
</div>
JSFiddle
There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.
Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li {
margin:0px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li:hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}