I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!
my html
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2">Pro1
<div class="subMenu">
<ul>
<li>sub1</li> //all li a would get the same
//backgroundimage btForTest2.jpg
// butI just want a clean background
<li>sub2</li>
<li>sub3</li>
</ul>
<ul>
<li>Volleyball</li>
<li>Walking</li>
<li>Water Shoes</li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
CSS:
#menuBar #mens a{
background:url("../images/btForTest2.jpg") no-repeat;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
.subMenu li a{
list-style:none;
margin: 0;
padding: 5px;
width: 200px; //width is 112px not 200 px
float: left;
color:#ffffff;
text-decoration:none;
}
.subMenu li a
{
background: none;
}
if it is not sticking, you can add the !important flag
.subMenu li a
{
background: none !important;
}
Add the following to the .subMenu li a section:
background:none !important;
Edit: Opened tab before durilai answered, so I didn't see his answer...
Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:
#menuBar > li > a {
background: red;
}
> means a direct descendant.
Related
<div id="headermenu">
<ul >
<li id="menu1"><img src="images/menu1.png"/></li>
<li id="menu2"><img src="images/menu2.png"/>
<ul class="submenu2">
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
</ul>
</li>
<li id="menu3"><img src="images/menu3.png" /></li>
<li id="menu4"><img src="images/menu4.png"/></li>
<li id="menu5"><img src="images/menu5.png"/></li>
</ul>
</div>
css
#headermenu ul ul {
display: none;
}
#headermenu ul{
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li{
width: 20%;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
left:0;
}
#menu1:hover{
background: url('images/menu1hover.png');
}
Hover is not working, I wonder how to make a list with image hover, I also want to know how to make a sub list when a li is hover. And if there is another list on sub list how to make it.. on pure css..
As you haven't given us all the information we need to solve this I will take a guess. As I said in the comments. It could be caused by the <img> sitting on the background, so when you hover you cant see the background at all.
HTML:
<div id="headermenu">
<ul>
<li id="menu1"><img src="http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg"/>
</li>
</ul>
</div>
CSS:
#headermenu ul ul {
display: none;
}
#headermenu ul {
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li {
width: 20%;
height: 50px;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
overflow: hidden;
border: 1px solid;
}
#menu1:hover {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
Here is your code as is, the background image is changing but cannot be seen because of the <img> in front.
DEMO HERE
Now here is the same code but the <img> being removed.
<div id="headermenu">
<ul>
<li id="menu1">
</li>
</ul>
</div>
DEMO HERE
We can see that the hover does work but the <img> was coving it up.
Solutions:
Just simply set a background on each li and then a background when on hover.
CSS:
#menu1 {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
#menu1:hover {
background: url('http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg');
}
DEMO HERE
You could also set the display to none for the img when on hover.
CSS:
#menu1 {
background: url('http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg');
}
#menu1:hover img {
display: none;
}
DEMO HERE
There are many more ways but these are two that will work.
You need to use either a background image, or an actual img for both before and after states. In your example, when the mouse hovers over #menu1 the background behind the menu1.png image is changed but menu1.png is obscuring it from view.
try this code
DEMO
<body> </body>
.urlImg { width: 140px; height:140px; display:block; background-image: url("http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg"); } .urlImg:hover { background-image: url('http://placehold.it/140x140'); }
I'm tearing my hair out here.
I have horizontal dropdown menu on a site I am building. The menu is made up of an unordered list, with the dropdown part made up of hidden child elements that pop up when you roll over the parents.
In Firefox everything appears to be fine, but, in Chrome and Safari, while the last child element in each menu is acting as expected, all other child elements are shunted left by one pixel. So, in the example below, Child A3, Child B4, and Child C2 are aligned perfectly with their respective parents, while the rest are not.
Can someone please shed some light on what is going wrong here?
Code and screenshots below...
How it should look...
How it actually looks...
I have included the entire nav block of the CSS just in case I have missed something outside of the actual parent/child part.
HTML
<nav>
<div id="menu" class="menustrip">
<ul>
<li class="page_item">
Parent A
<ul class='children'>
<li class="page_item">Child A1</li>
<li class="page_item">Child A2</li>
<li class="page_item">Child A3</li>
</ul>
</li>
<li class="page_item">Parent B
<ul class='children'>
<li class="page_item">Child B1</li>
<li class="page_item">Child B2</li>
<li class="page_item">Child B3</li>
<li class="page_item">Child B4</li>
</ul>
</li>
<li class="page_item">Parent C
<ul class='children'>
<li class="page_item">Child C1</li>
<li class="page_item">Child C2</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS
#menu, #main-nav{
width: 950px;
margin: 0 30px 0 0;
padding-right: 30px;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #78B2E2;
text-align: right;
}
ul#main-nav{
list-style: none;
padding-top: 10px;
margin-right:30px;
}
.page_item, .navlink{
display: inline-block;
background-color: #243488;
height: 34px;
width: 110px;
margin-left: 1px;
text-align: center;
}
.page_item a, .navlink a{
padding-top: 4px;
display: block;
height: 34px;
width: 110px;
}
.page_item:hover, .navlink:hover{
background-color: #78B2E2;
}
.page_item:active, .navlink:active{
background-color: #78B2E2;
}
/* Hide Sub Menus by default */
#menu ul li ul.children {
display:none;
z-index:100;
}
/* Display Sub Menus on rollover of parent */
#menu ul li:hover ul.children {
display:block;
position:absolute;
top:205px;
margin: 0 0 0 -11px; /*pull child menus in line with parent */
width: 132px;
list-style: none;
}
/* Style sub menu items not to float like parent items */
#menu ul li ul.children li {
float:none;
width:110px;
height: 34px;
background-color:#243488;
border-top: 3px solid #ffffff;
font-size: 11px;
}
#menu ul li ul.children li:hover {
background-color:#78B2E3;
color:#243488;
}
/* Sub Menu link color */
#menu ul li ul.children li a:hover {
color:#243488;
}
#menu ul li ul.children li a {
color:#ffffff;
}
Not sure what causes it exactly, but it has to do with the fact that the list items in <ul class="children"> are inline-blocks and the ul itself is centered.
So you have two solutions: either align the ul to the left instead of centering it
.children {text-align:left;}
or, make its list items blocks instead of inline blocks.
.children > li {display:block;}
Either of those adjustments will get rid of the display anomaly. In both cases, you will also have to increase the left margin, but I'm sure that won't be a problem.
Changing .children .page_item to display:block rather than display:inline-block seemed to fix it in my Chrome. This also required a bit more margin-left to re-align things.
.children .page_item {
display:block;
margin-left:10px;
}
Is it possible to display a sub-list beside it's parent using only css and no fixed width?
I'm trying to implement a navigation menu in css. I managed to display the first submenu under it's parent.
But when it come to the submenu of the submenu, I only manged to put it beside it's parent with a fixed offset. But since the offset can differ depending on the width of the parent, and the width of the parent change depending of the browser used, that solution does not work.
here is my css
.main-nav{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
text-align: center;
}
.nav-centered {
display: inline-block;
text-align: left;
margin:0;
padding:0;
z-index:10;
}
.nav-main-menu {
list-style-type: none;
background-color:#91a056;
margin:0;
padding:0;
height:25px
}
.nav-main-menu li {
display: inline;
text-align: center;
float:left;
position:relative;
}
.nav-main-menu li a img {
padding-bottom:0px;
color: #fff;
background-color: #91a056;
}
.nav-main-menu li a:hover {
background-color: #bbc888;
}
.nav-main-menu li li a:hover, .nav-main-menu li li span:hover, .nav-main-menu li li span:hover {
background-color: #bbc888;
}
.nav-main-menu li:hover ul {
display:block;
float:left;
}
.nav-main-menu li li, .nav-main-menu li li li {
display:block;
text-align:left;
width:100%;
border: 3px ridge #91a056;
}
.nav-main-menu li ul, .nav-main-menu li li ul, .nav-main-menu li:hover li ul {
display:none;
position:absolute;
}
.nav-main-menu li li:hover ul {
display:block;
float:left;
top:0px;
left:176px; /* I want to get rid of this fixed offset */
}
.nav-main-menu li li li a, .nav-main-menu li li a, .nav-main-menu li li span {
display:block;
text-align: left;
white-space: nowrap;
font-size:100%;
color: #FFF;
padding: 0 1em;
background-color: #91a056;
}
.nav-main-menu li li a span{
padding: 0;
}
.nav-main-menu li a {
margin-left:auto;
margin-right:auto;
font-size:120%;
text-decoration: none;
padding: 0 1em;
color: #fff;
background-color: #91a056;
}
I want to get rid of the .nav-main-menu li li:hover ul left offset.
And here is the revelant part of my html code
<div xmlns="http://www.w3.org/1999/xhtml" class="main-nav">
<div class="nav-centered">
<ul class="nav-main-menu">
<li><a href="/" ><span>Acceuil</span></a></li>
<li><a href="/?_=/page/regle" ><span>Regles de jeu</span></a>
<ul>
<li><span>Les personnages</span>
<ul>
<li><a href="/?_=/page/regle/commencer" ><span>Se creer un personnage</span></a></li>
<li><a href="/?_=/page/regle/race" ><span>Les Races</span></a></li>
<li><a href="/?_=/page/regle/alignement" ><span>Les Alignements</span></a></li>
<li><a href="/?_=/page/regle/entrainement" ><span>Les Entrainements</span></a></li>
<li><a href="/?_=/page/regle/conpetence" ><span>Les Competences</span></a></li>
<li><a href="/?_=/page/regle/handicape" ><span>Les Handicapes</span></a></li>
<li><a href="/?_=/page/regle/dieu" ><span>Les Dieux</span></a></li>
<li><a href="/?_=/page/regle/doamine" ><span>Les Domaines</span></a></li>
<li><a href="/?_=/page/regle/sort" ><span>Les Sorts</span></a></li>
<li><a href="/?_=/page/regle/profile" ><span>Les Profiles</span></a></li>
<li><a href="/?_=/page/regle/terrictoire" ><span>Les Terrictoires</span></a></li>
<li><a href="/?_=/page/regle/prestige" ><span>Les Prestiges</span></a></li>
</ul>
</li>
<li><span>Les reglements</span>
<ul>
<li><a href="/?_=/page/regle/combat" ><span>Les Combats</span></a></li>
<li><a href="/?_=/page/regle/etatAlterer" ><span>Les Etats Alteres</span></a></li>
</ul>
</li>
<li><span>L'univers</span>
<ul>
<li><a href="/?_=/page/regle/seigneurie" ><span>Les Seigneuries</span></a></li>
<li><a href="/?_=/page/regle/groupe" ><span>Les Groupes</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-login"><a href="/?_=/login" ><span>Inconnue</span></a>
<ul>
<li><a href="/?_=/login" ><span>Se connecter</span></a></li>
</ul>
</li>
<li><a href="/?_=/page/info" ><span>Qui sommes-nous?</span></a></li>
<li><a href="/?_=/forum" ><span>Forum</span></a></li>
<li><a href="https://www.facebook.com/" ><img alt="Page facebook" src="/img/icon-facebook.gif" style="max-width:19.0px;max-height:19.0px;" /></a></li>
</ul>
</div>
</div>
As you are positioning the submenu absolutely, it is not possible to allow it to grow and position the second submenu next to a fluctuating width parent submenu, at least not without JS.
In my experience, generally you would most likely want a fixed width submenu and not be at the mercy of content, because if the content is quite long, this will not look good in the design, at least 99% of the time.
So I would suggest you constrain the submenu's maximum width and with a bit of planning you can allow for larger content and if long content is unavoidable simply allow it to drop on to two lines.
Also I understand this is probably just example CSS for asking the question, but your CSS styles are not very well laid out and do not cascade very well, this can make advanced CSS styling hard and time-consuming. Try to avoid using long, unclear and complex selectors, the beauty of CSS is being able to easily cascade styles. Smaller concise selectors also help performance.
Using a class you can reduce
.nav-main-menu li li li {}
to
.submenu ul li{}
I realise this is not exactly the answer you were probably looking for but I have created a quick basic fiddle with styles to style your submenu's HTML with my suggestions. I have added a class of .submenu to all li's that contain submenu's, including secondary submenu's.
http://jsfiddle.net/lee_gladding/xRyMW/
hope this helps
So, I'm trying to create a horizontal rollover menu .
Things were fine until I start working on my "current page" to show where the visitor is on the navigation bar.
I wanted to do so with a class named "active".
I want the sub menu to be visible at all time.
It seems like the <li> (from my navigation ) which are earlier in the html code than the one with the class "active", doesn't react as they are supposed to when mouse hovered; The sub menu doesn't show anymore...
I'm not sure if I'm clear or if I'm making any sense, It is still a new technology to me and explaining what's going on is quite hard.
Please let me know if you can help me or if you want me to explain differently.
Thanks a lot
Mick
UPDATES
Here are some screenshots of were I am now thanks to Wire42 (I add some lower Z index to the sub menu item as well as a white background).
So now the previous element react properly to the mouse hover but the active element (in the example "take action") doesn't show the sub menu.
image 1: the active item doesn't show the sub menu (it should show sub menu even when not mouse hovered)
image 2: problem solved for the mouse hovered items
Am I missing something?
CSS
#menu_wrapper {
padding:0;
margin:0;
position:relative;
left:108px;
top:2px;
}
#menu {
width:812px;
height:28px;
background-color: #B4B4B4;
padding:0 0 0 60px;
}
#menu li {
display: inline;
list-style-type: none;
}
#menu li a {
font-size: 13px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
float: left;
color: #000000;
padding: 6px 13px;
border-right: 1px solid #999;
}
/* get rid of last border in menus*/
#menu li:last-child a, #menu li.active li:last-child a, #menu li:hover li:last-child a{
border:none;
}
#menu li:hover > a {
background-color: #e9748b;
}
#menu li.active > a {
background-color: #e9748b;
}
/*-------------------SUB MENU---------------*/
#menu li ul {
display:none;
padding:0 0 0 60px;
}
#menu li:hover > ul {
display:block;
position:absolute;
padding: 0 0 0 90px;
left:0; top:28px;
background:url(Images/background_sub_menu.png) repeat-x;
width:782px;
min-height:23px;
}
#menu li.active > ul{
display:block;
position:absolute;
padding: 0 0 0 90px;
left:0; top:28px;
background:url(Images/background_sub_menu.png) repeat-x;
width:782px;
min-height:23px;
z-index: -1;
}
#menu li li {
list-style:none;
}
#menu li li a, #menu li.active li a{
color:#000000;
background:none;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-transform: none;
border-right: 1px solid #999;
padding:5px 10px;
margin:0;
}
#menu li.active li a{
z-index:-1;
}
#menu li li a:hover {
background:none;
font-weight: bolder;
color: #000000;
background-color: #CC6633;
}
#menu li li.active a {
text-decoration:underline;
background:none;
font-weight: bolder;
color: #000000;
z-index:-1;
}
HTML
<ul id="menu">
<li>Home
<ul>
<li> </li>
</ul>
</li>
<li>About the Foundation
<ul>
<li>What we do</li>
<li>Who we are</li>
<li>Goals for 2012</li>
<li>Annual reports</li>
<li>Help 4 Guys .com</li>
</ul>
</li>
<li>Programs
<ul>
<li>Male Abuse Awarness Week</li>
<li>Help 4 Guys .com</li>
<li>Events</li>
</ul>
</li>
<li class="active">Take Action
<ul>
<li>Volunteer for PLF</li>
<li>Help our Foundation</li>
<li class="active">Donate</li>
<li>FAQ</li>
</ul>
</li>
<li>Find Support
<ul>
<li>Child Abuse FAQ</li>
<li>Find Support Near You</li>
<li>Support for the Families</li>
<li>Privacy</li>
<li>Our Network</li>
</ul>
</li>
<li>Contact Us
<ul>
<li></li>
</ul>
</li>
</ul>
Here's a solution using purely CSS, no javascript:
http://jsfiddle.net/nammp/1/
This code does two things (which, as I answer this, are hacked in there, but I will go back and clean it up if someone else doesn't get to it first):
Active elements receive a z-index of -1 and so are rendered under the hover elements
Hover elements get a white background-color so they visually hide the active elements
I think this solves the problem. Hopefully we can clean up this question so the code is a little more generic.
I changed UL li menu with working sample.
please look into the link. http://jsfiddle.net/abhishekbhalani/ZzF6S/
Let me know if any issue.
Refer below urls, I think it would be useful for you.
Tab changes on Mouseover
simple css hover tab thingy
Thanks
Abhishek
I got a reallly simple drop-down menu but got a problem with the submenus width.
See it here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
My HTML is:
<div id="navigation">
<div id="menu-dropdown">
<ul class="menu">
<li class="menu_punkt">Frontpage</li>
<li class="menu_punkt">Who are we?</li>
<li class="menu_punkt">This is a test
<ul>
<li>Your profile</li>
<li>New profile</li>
</ul>
</li>
<li class="menu_punkt">SOS Profile
<ul>
<li>Your profile</li>
<li>New user</li>
</ul>
</li><li class="menu_punkt">Log ind</li>
</ul>
</div>
</div>
and my CSS is:
/*horisontal navbar*/
#menu-dropdown {
list-style: none;
position: absolute;
top: 600px;
}
#menu-dropdown ul li {
float:left;
list-style-type: none;
font-size: 0.8em;
}
#menu-dropdown li ul {
position: absolute;
display: none;
background-color:#cdc3a2;
padding: 0px;
margin-bottom:1px;
}
#menu-dropdown ul ul li {
clear: both;
}
#menu-dropdown ul li a {
display: block;
padding: 10px;
color:#102B47;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size: 1em;
}
#menu-dropdown ul li a:hover {
background-color: #cdc3a2;
}
#menu-dropdown li:hover ul, li.over ul {
display: block;
}
You can see my problem here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
Regards
- Mestika
Add a width to the submenu anchors
.menu ul li a { width:200px;}
Also add the hover to the li (not teh anchor) that way the top menu stays selected when you are in the submenus
#menu-dropdown ul li:hover, #menu-dropdown ul li.hover {
background-color: #cdc3a2;
}
I think you should add a width to the menu-dropdown ul li class.
A great way to build a css drop down menu is son of a suckerfish.
Yes JAO is right u shoud give width to li like this
#menu-dropdown ul ul li {
clear:both;
width:107px;}
you can get more clue from here http://www.cssnewbie.com/example/css-dropdown-menu/
Try:
.menu ul li li {width: 100%}
when I learnt to write css dropdown menus I based a lot of experiments on the ton of examples on this site : http://www.cssplay.co.uk/menus/ - very clear css / html examples, minimal, clean code
hope it helps :)