CSS Submenu background on hover - css

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.

Related

How to create a FIXED submenu (the dropdown menu should be displayed permanently)

I have a menu and a submenu. The submenu is only displayed when hovering over it.
QUESTION 1: I want it to be displayed permanently.
QUESTION 2: I would like it to be displayed horizontally (and not vertically as it is now).
To see what I mean, go to http://appartement-met-zeezicht.be and hover on "English". What is displayed under "English" should be displayed permanently, pereferably in a horizontal (and not vertical) way.
Thanks a lot!!
/SUBMENU/
topmenu ul li ul{ position:absolute;width:150px; z-index:999999; padding-left:0; margin-left:-10px; margin-top:24px; display:none;}
topmenu ul li ul li{ float:none; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat; display:block; border-bottom: 1px solid #333; height:auto;}
topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}
.tinynav, .tinynav1{ display:none;}
EDIT: it seems that some Javascript is overwriting the CSS, you can try to add this to style.css:
#topmenu ul li ul, #topmenu li:hover > ul {
display: block !important;
}
For the second question: in your style.css find the parts below /MENU/ and /SUBMENU/. Delete the next lines below those comments and paste this code instead:
/*MENU*/
#menu_wrap{width:100%; float:left; background:#302f2f url(images/menu_wrap.png) repeat;}
.is-sticky{ width:1000px!important;}
#topmenu{text-align:center;}
.menu-header{margin:auto; padding:0; display:block;}
#topmenu ul{ margin:0; padding:0;}
#topmenu ul li{list-style-type:none; display:inline-block; margin-top:0px;padding:25px 15px;}
#topmenu li a{ font-size:18px; color:#fff;}
#topmenu ul > li:hover{ background:url(images/transblack.png) repeat;}
#menu-icon{display:none;}
/*SUBMENU*/
#topmenu ul li ul{ position:absolute;width:auto; z-index:999999; padding-left:0; margin-left:-10px; margin-top:24px; display:none;}
#topmenu ul li ul li{ float:left; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat; display:block; border-bottom: 1px solid #333; height:auto;}
#topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
#topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
#topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}
You need to remove "Hover" this list.
And make this list "display: inline-block;"
You may need something like this:
ol {
display: inline-block;
vertical-align: top;
}
li {
display: inline-block;
margin-right: 10px;
width: 60px;
cursor: pointer;
vertical-align: top;
}
<div>
<ol>Spiderman</ol>
<ol>Wolverine</ol>
<ol>The Avengers <br>
<li>Iron Man</li>
<li>Captain America</li>
<li>Thor</li>
<li>Black Widow</li>
</ol>
</div>

html5 dropdown menu not loading correctly over hover [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am a beginner in programming.Now i am assigned with the task of making a site with html5 and css.The issue what i am facing is
I have a horizontal menu bar with vertical sub menu will come on hover.
3 main tabs home ,health,safety
under that i have sub menus
when i am clicking all main menus are working fine.
But when clicking home -health-health sub menu(it works fine) -safety sub menu(it wont work fine)
this is error i am getting when i click fire hazards directly after health.
No webpage was found for the web address:
http://file:///C:/Users/DELL/Desktop/a/health/safety/fire_hazards.html
the web address shown above is incorrect.
i have kept fire hazards in safety-firehazards folder
and not in health -safety-firehazards folder
why is the path is showing wrong
<div id="menu"> <!--starts of menu-->
<ul >
<li>Home</li>
<li>Health
<ul>
<li>Personal Hygiene`enter </li>
<li>Food Hygeiene</li>
</ul>
</li>
<li>Safety
<ul>
<li>Fire Hazards</li>
<li>Cooking Gas</li>
</ul>
</li>
</ul>
</div><!--end of menu-->
CSS
#menu {
display:block;
position:relative;
width: 960px;
height: 50px;
background-color: #fff;
margin: 0px auto;
border:1px solid #000;
}
#menu ul li a:hover{
color:#c1d82f;
}
#menu ul .current {
color: #b13932;
}
#menu li:hover ul{
display:block;
}
#menu ul {
margin: 0px;
padding: 4px 0px;
}
#menu li {
float:left;
position:relative;
list-style-type:none;
}
#menu li a {
display: block;
padding:10px 45px;
}
#menu ul :after{
content:".";
height:0px;
clear:both;
visibility:hidden;
}
#menu ul ul{
position:absolute;
left:0px;
display:none;
}
#menu ul ul li {
width:100%;
}
#menu ul ul li a{
border-right:none;
padding:5px 5px;
}
/* end of menu */
}
You can try this code also:
#menu {
width:100%;
position:relative;
background:#ccc;
}
nav {
position:relative;
}
nav ul {
margin:0;
padding:0;
}
nav ul li {
margin:0;
padding:0;
list-style:none;
display:inline-block;
position:relative;
}
nav ul li a {
font:bold 12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#333;
padding:7px 10px;
display:inline-block;
text-decoration:none;
}
nav ul li:hover > a {
text-decoration:none;
color:#005ba0;
}
nav ul li a.current {
background:#005ba0;
color:#fff;
}
nav ul ul {
min-width:200px;
position:absolute;
top:100%;
z-index:666;
background:#eee;
display:none;
}
nav li:hover > ul {
display:block;
}
nav ul ul ul {
left:100%;
top:0;
}
nav ul ul li {
display:block;
width:100%;
}
nav ul ul a {
padding:7px 10px;
display:block;
color:#777;
border-bottom:1px solid #ddd;
text-align:left;
}
nav ul ul a:hover {
background:#ddd;
}
nav ul ul a.current {
background:#dddd;
color:#005ba0;
}
<div id="menu">
<nav>
<ul>
<li>Home</li>
<li>Health
<ul>
<li>Personal Hygiene`enter</li>
<li>Food Hygeiene</li>
</ul>
</li>
<li>Safety
<ul>
<li>Fire Hazards</li>
<li>Cooking Gas</li>
</ul>
</li>
</ul>
</nav>
</div>

Drop down menu that show new link on 2 columns

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/

CSS navigation tab gets displayed behind the text instead of in the foreground

I have the following css code:
#menu li {
float:left;
position:relative;
line-height: 3em;
width: 10em;
}
#menu li ul {
position:absolute;
margin-top:0em;
margin-left:.0em;
display:none;
}
#menu ul li ul {
margin-top:0em;
margin-left:0em;
}
#menu a {
display:block;
border-right:1px solid #fff;
background:#3B3B3B;
color:#3B3B3B;
text-decoration:none;
padding:0 0px;
text-align:center;
background: url(images/nav.gif) repeat-x 0 0;
height: 50px;
list-style-type: none;
}
#menu a:hover {
background-color::#3B3B3B3;
color:#fff;
text-align:center;
height: 50px;
list-style-type: none;
}
#menu ul {
border-top:1px solid #fff;
float: right;
list-style-type: none;
}
#menu ul a {
border-right:none;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
background:#fff;
text-align:center;
background: url(images/nav.gif) repeat-x 0 0;
height: 50px;
}
/* SHOW SUBMENU 1 */
#menu li:hover ul, #menu li.over ul {
display:block;
background:#fff;
}
#menu li:hover ul ul, #menu li.over ul ul {
display:none;
}
/* SHOW SUBMENU 2 */
#menu ul li:hover ul, #menu ul li.over ul {
display:block;
}
and the following HTML code
<div class="shell">
<div class="cl"> </div>
<ul id="menu">
<li>HOME</li>
<li>
CLIENTS
<ul>
<li>CLIENT LIST</li>
The problem I am having is that when the I hover my mouse over the drop down tabs - "CLIENT LIST" - It gets displayed behind the images and text that are on my page. How do I bring it to front?
As I understand your menu is coming under images and text, which are placed on your page. and you want to display this menu over all the content of the page.
If so, then provide a higher z-index value to your menu from all the content.
like: .menutab { z-index : 1000;} where .menutab is a class which is on your menu element.
Edited : make change in this line
/* SHOW SUBMENU 1 */ #menu li:hover ul, #menu li.over ul
{ display:block; background:#fff;}
to
/* SHOW SUBMENU 1 */ #menu li:hover ul, #menu li.over ul
{ display:block; background:#fff; z-index:1000; }
It will solve your problem.
check this DEMO

CSS Trouble on Dropdowns

uMy child pages are showing up in a horizontal line under the parent page link in the navigation. I can't figure out where the css is wrong. You can see what I'm talking about here (the links under Sample Page are the ones in question): http://sitetest3.talktothedogs.com.
HTML for Navigation (which is auto-generated by WP)
<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Sample Page
<ul class='children'>
<li class="page_item page-item-4">Testing page 2</li>
<li class="page_item page-item-6">Testing page 1</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS Code
.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { }
.menu li.current_page_item a:hover{ }
Any help would be appreciated. Thanks in advance!
Change your CSS as follows:
.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }
Here is how this would look
Your first line in the CSS:
.menu, .menu ul { ... }
is setting the height of both the <div class="menu"> AND the <ul> within that .menu to the same height. The entire menu is constrained to a container that's 29px high.

Resources