I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)
Related
I'm having trouble writing a code for a simple drop down menu but cant understand what I'm doing wrong still new to coding. Whenever I bring my cursor over the respective dropdown li tag the hover color effect is there but nothing comes down. In a previous attempt when the code was a a little different the list id appeared but it was in an inline manner and was align horizontally not vertically plz help.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li id="main">Home</li>
<li id="main">Products</li>
<li id="main">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
First of all, you have id="main" applied to multiple elements. id is meant to be unique and applied to only one element.
Second, your hover effect was just a little incomplete. See my changes below.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
/*overflow: hidden; don't do this if you want dropdowns */
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
#nav>li>a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
#nav>li>a:hover {
background-color: #d3d3d3;
color: black;
}
#nav>li {
position: relative;
display: inline-block;
}
#nav>li ul {
display: none;
position: absolute;
}
#nav>li:hover ul {
display: block;
bottom: -80px;
padding: 10px;
left: 0;
min-width: 100px;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li>Home</li>
<li>Products</li>
<li>More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li>About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
you need to target ul li ul which you will show and hide ... and #main id can not be duplicate on the same page.. working example as below
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li{display: inherit;}
ul li ul {
display: none;
width: auto;
position: absolute;
top: 35px;
background: #ccc;
margin: 0;
padding: 0;
}
ul li ul li{display:block; list-style-type:none}
ul li:hover ul {
display: block;
z-index:1000;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li class="nestedchild">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
Your css should be like that.
.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu {
background-color:red;
}
.bottom-line {
border-bottom:5px solid pink;
}
#navbar{
background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;
}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
#main{
display: inline;
}
a{
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover{
background-color: #d3d3d3;
color: black;
}
ul li {
float: left;
position: relative;
}
ul li ul {
display: none;
position: absolute;
list-style: none;
top: 32px;
z-index: 5;
background-color: #ddd;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
and You can also see demo here
I've looked through other questions but none seem to explain the problem I'm having. I want to create a drop down menu to an already existing navigation bar, and I think it's a problem with the way I've named the classes.
Here is my HTML code for the nav bar
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a></li>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>
And here is the CSS I have tried to implement:
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
I works otherwise, the menu just doesn't drop down. Can anyone help? Thanks a lot!
Your selector to show the menu on hover is .extendMenuClass:hover .extendedDiv, but .extendedDiv is not a child of .extendMenuClass. Updated that so that it is a child and that selector will work.
Then you need to remove overflow: hidden; from .customMenu since .extendedDiv will bleed below/outside of .customMenu and will be hidden if overflow is hidden.
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div></li>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>
Common syntax for navigation is nesting unordered lists inside other unordered lists.
so you'd set it up like:
<ul class="main-nav">
<li>1</li>
<li class="dropdown">2
<ul class="dropdown-list">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</li>
<li>3</li>
</ul>
It's a lot easier to keep parent and child elements in order.
I just set it up a little easier for you to follow and continually add items:
HTML:
<ul class="customMenu">
<li style="background:red;">Home</li>
<li class="extend">Cities
<ul class="dropdown">
<li>Paris</li>
<li>Lyon</li>
<li>Toulouse</li>
</ul>
</li>
<li>Phrases</li>
<li>Bank Accounts</li>
<li>Important Notes</li>
<li>CAF</li>
<li style="background: red; float: right;">Déconnexion</li>
</ul>
CSS:
ul.customMenu {
width: 100%;
background: #00264d;
}
ul.customMenu li {
display: inline-block;
}
ul.customMenu li a {
display: block;
font-size: 23px;
color: #fff;
text-decoration: none;
padding: 16px 17px;
}
ul.customMenu li a:hover {
color: red;
}
ul.customMenu li ul.dropdown {
display: none;
position: absolute;
top: 55px;
left: -5px;
background: red;
overflow: hidden;
}
ul.customMenu li ul.dropdown li a {
display: block;
width: 100%;
padding: 16px 20px;
}
ul.customMenu li ul.dropdown li a:hover {
color: #fff;
background: #cc0000 !important;
}
li.extend {
position: relative;
}
li.extend:hover ul.dropdown {
display: block !important;
}
My navigation bar doesn't work in Firefox. You can't click on any of the child items. I apologize if I'm putting too much code here, but I really don't know what's causing the issue. I've removed as much of the trivial stuff as I could.
#navbar {
width: 100%;
border-top: 1px solid #879478;
height: 35px;
}
#navigation {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: -10px !important;
}
#nav {
float: left;
width: 1000px;
height: 35px;
list-style: none;
}
#nav a {
text-indent: 0;
display: inline-block;
margin-top: -1px !important;
font-weight: normal;
border: 1px solid transparent;
font-style: normal;
height: 35px;
line-height: 35px;
text-decoration: none;
text-align: center;
}
#nav ul {
position: absolute;
list-style: none;
display: inline-table;
margin-top: 1px !important;
height: 35px;
}
#nav li:hover > ul {
display: block;
}
#nav li {
float: left;
}
#nav ul {
display: none;
}
#nav ul a {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
display: inline-block;
width: inherit;
text-align: center;
display: block;
font-weight: normal;
}
#nav ul {
padding: 0px;
z-index: 100 !important;
}
#nav ul li {
float: none;
}
#nav ul ul {
width: 141px !important;
padding-top: 1px !important;
border-top: 1px solid #6f8059 !important;
position: absolute;
margin-top: -38px !important;
left: 100%;
margin-left: 1px;
z-index: 100 !important;
}
<div id="navbar">
<div id="navigation">
<ul id="nav">
<li><a style="width: 150px !important;">subject 1</a>
<ul>
<li>child 1
</li>
<li>child 2
</li>
</ul>
</li>
</ul>
</div>
</div>
As #Nitin Garg said, #nav ul { display: none; } line is hidding child elements.
However, if you want to show childs element on parent li hover, you have to add this line :
#nav li:hover ul {display: block; }
I am creating a little animation with glow in navigation.
Glow is behind the navigation menu as seen in picture.
I tried but not clear result, I need same result as shown in picture.
http://jsfiddle.net/naresh_kumar/GCpDW/5/
HTML
<div id="topnav" style="float:right;">
<ul class="nav clearfix">
<li id="menu-item-6">
Home
</li>
<li id="menu-item-8">
<a>Tutor Videos</a>
</li>
<li id="menu-item-7">
<a>Download Font</a>
</li>
<li id="menu-item-9">
<a>news</a>
</li>
</ul>
</div>
CSS
body{background:#000000;}
ul { margin-left: 20px; padding: 0; }
#topnav {
font-size: 8pt;
font-weight: bold;
margin-top: 2%;
float: left;
font-size: 8pt;
margin-bottom: 0;
margin-left: 63px;
margin-right: 0;
margin-top: 4% !important;
padding: 0;
width: 60%;
}
#topnav ul {
background: none repeat scroll 0 0 #E2E2DE;
border: 3px solid #FFFFFF;
line-height: 1;
list-style: none outside none;
margin: 0;
padding: 0;
}
#topnav ul li {
float: left;
width: auto;
}
#topnav ul li a {
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
display: block;
line-height: 30px;
margin: -17px 0;
}
#topnav ul a {
color: #000000 !important;
display: block;
line-height: 24px;
padding: 5px 10px;
position: relative;
text-decoration: none;
z-index: 90;
}
#topnav ul a:hover, #topnav ul ul a:hover {
border-color: white;
color: #0A0A0A;
box-shadow: 0 0 50px gold, 0 0 150px gold;
}
.clearfix:after, blockquote:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix, blockquote {
display: block;
}
.clearfix, blockquote {
display: inline-block;
}
It's going to be difficult to get the glow 'behind' the menu just using CSS3 but with some minor tweaks (including more subtle use of colour for the glow) you can make the example you have already produced look quite reasonable with the glow on top of the menu
#topnav ul a:hover, #topnav ul ul a:hover {
border-color: white;
color: #0A0A0A;
box-shadow: 0 0 100px #ffffee, 0 0 100px #ffffee;
}
In my set up I have my navigation bar set horizontally and contained within my header div like this:
<div id="header-section">
<div id="main-menu-wrapper">
<ul id="main-menu">
<li>Home</li>
<li>Services
<ul id="sub-men">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?
Here's the CSS portion for my whole header section:
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}
#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}
#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}
#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}
#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}
#main-menu li ul {
position: absolute;
display: none;
}
#main-menu li ul li{
float: none;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}
#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}
#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}
#logo {
max-width: 600px;
height: auto;
}
I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.
I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.
Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
You could try to use absolute positioning on the submenu to remove it from the document flow.