I'm trying to modify a template navigation bar to have a dropdown on
how-to hover, but I can't seem to get sub 2 to drop below sub 1.
I also noticed that things break when put to mobile size and is hovered. (but that's because I haven't worried about the mediascreen yet).
Any ideas?
See the fiddle for the full code.
HTML
<!-- Navigation options -->
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>How-to
<ul id="submenu">
<li>sub1
<li>sub2
</ul> <!--end sub ul-->
</li>
<li>Icons</li>
<li>Design</li>
<li>Web 2.0</li>
<li>Tools</li>
</ul> <!-- end ul clearfix -->
Menu
</nav> <!-- end nav clearfix -->
CSS
.clearfix li:hover ul {
display: block;
}
.clearfix li ul {
display: none;
position: absolute;
top:100%;
background: #455868;
width: auto;
height: auto;
vertical-align: top;
}
.clearfix li ul li {
width: auto;
}
.clearfix li ul a {
display: block;
}
For full code see Fiddle:
https://jsfiddle.net/m7tnf8ao/
Your submenu li elements were picking a float from nav li rule.
Added on line 38 in jsfiddle:
.clearfix li ul li {
width: auto;
float:none; /* <- this one here */
}
To make sub 2 apear under sub1 turn off float property for sub menus:
#submenu li {
float: none;
}
Second problem solved with:
#media screen and (max-width: 600px) {
#submenu {
position: static;
}
}
Related
I'm trying to make a navigation menu for responsive website. I came to a point where I have my main menu fluid but not sure how to get drop-down menu from it .
Here is my html code:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
<li>Clothes</li>
<li>Recipe</li>
<li>Contact</li>
</ul>
</div><!-- ends nav -->
</body>
Here's my CSS:
#nav {
display: table;
table-layout: fixed;
width: 100%;
}
#nav ul {
display: table-row;
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
display: table-cell;
text-align: center;
}
#nav ul li a {
display: block;
}
I tried adding these lines of code to my CSS but didn't work as well:
#nav ul li:hover ul {
display: block;
}
Please help me out.
Thanks
The list structure in the question is incorrect
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
Should be
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
</li>
The sub <ul> is wrapped in the parent <li> node.
Second, add the code below to make it drop down:
#nav li {position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:100%;}
Then add more CSS code to make it beautiful.
I am trying to add a dropdown menu in the right side of my top header, but I have got an issue with the "dropping down thing". The Header follows the menu, so it includes the nav and goes down, following what the menu is supposed to do.
I think the problem is related to the z-indexes which I haven't set properly, but I am not quite sure.
I would like to have a dropdown menu in the header, without being followed by the header itself.
This is the right side of the Header.
<div class="rightHeader">
<div class="rightContainer">
<div class="profile-nav">
<nav>
<ul>
<li><h3> edo1493</h3>
<ul>
<li> Notifications </li>
<li> Messages </li>
<li> Settings </li>
<li> Log out </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
And this is the CSS:
.rightHeader .rightContainer .profile-nav nav ul ul{
display: none;
background-color: yellow;
}
.rightHeader .rightContainer .profile-nav nav ul li:hover> ul {
display: block;
}
.rightHeader .rightContainer .profile-nav nav ul {
list-style-type: none;
display: inline-table;
padding: 0;
margin: 0;
}
.rightHeader .rightContainer .profile-nav nav ul:after {
content: ""; clear: both; display: block;
}
Any advice?
This is the Header's CSS:
#header-new{ position:fixed; width:100%; top: 0; left:0px; background-color:#3b3b3b;z-index: 1;}
Thanks
This will be accomplished with a simple change (adding position:absolute):
.rightHeader .rightContainer .profile-nav nav ul ul{
position:absolute;
display: none;
background-color: yellow;
}
This will then allow the navigation to fall below the header and not pull it with it.
See Example: http://jsfiddle.net/ZgzXE/12/
See: http://www.w3schools.com/css/css_positioning.asp for more information on positioning
I use the following HTML program for creating Horizontal menu bar with horizontal sub menu.It was working fine in Fire Fox and Chrome but it doesn't work in IE.So What are the changes are need changes in this program?
<html>
<head>
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
do you use modernizr? or have available classes for legacy IE browsers? You might want to try messing with separate styles and/or stylesheets for IE.
Or
You can switch your navigation from floated blocks to "inline" elements, which older browsers such as IE6 that don't work well with floats will recognize.
Or
If you want to stick with floats then make sure you are setting a "width" for any floated element.
Chris Coyier has a nice article on floats that contains a section labeled: "Problems with Floats"
http://css-tricks.com/all-about-floats/
Well for some reason I can't even get the fiddle site to work at all in IE8...? But one problem I noticed in your CSS, is opacity. IE8 doesn't support the opacity property. To change the opaqueness of elements in old IE, use filter:alpha(opacity=75); Note, the value 75 is a whole number from 1 to 100, not a decimal like with the opacity property. I wish I could be more help, but I can't even see what the problem is in the fiddle...
Most CSS vertical menus have their second level and third layer menus popping out right beside the 1st level menu. This creates a space if you go to the third option in the first level menu. The second level menu from that third option is positioned only as high as the third menu first level item. Thus, there's a space above the second level menu, all the way up to the first level menu first selection.
How would I go about making it so that the second level menu that pops out would be at the highest first level menu selection?
I made a graphic to further iterate this.
http://i.imgur.com/v1UIk.png
http://i.imgur.com/weEwn.png
In the first image, when you hover over Purchase, the menu pops out to the side. Instead, I want the menu to pop out above, at the Products area. I want it so that even if I go to Products, Purchase, Support, Downloads...etc, that second level menu ALWAYS pops out at the top of the menu/Products.
In my actual menu, each level will only have four options, so there will be no issues hovering over and keeping the menu active.
Does anyone have a link or an idea on how to get this done?
Thanks - and I hope I explained it well..lol.
EDIT:
*I took this off of a website, I realize there's a ton of syntax errors like missing quotes and such. I'm just trying to get it to work before I fix anything and refine it.
CSS
#menu ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
#menu ul li {
position: relative;
}
#menu li ul {
position: absolute;
left: 149px; /*Set 1px less than menu width */
top: 0;
display: block;
}
#menu li:hover ul {
display: block;
}
#menu li:hover>ul {
visibility:visible;
}
#menu ul ul {
visibility:hidden;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
/* Make-up syles */
#menu ul, li {
margin: 0 0 0 0;
}
/* Styles for Menu Items */
#menu ul a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Hover Styles */
#menu ul a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Sub Menu Styles */
#menu li ul a {
text-decoration: none;
color: #77F;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Sub Menu Hover Styles */
#menu li ul a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Icon Styles */
#menu ul a.submenu {background:#fff url("r_arrow.gif") no-repeat right; }
#menu ul a.submenu:hover {background:#f9f9f9 url("r_arrow.gif") no-repeat right;}
html:
<div id=menu>
<ul id=menuList>
<li>Products
<ul>
<li>All</li>
<li>CodeCharge</li>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
<li>Comparison<ul>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
</ul></li>
</ul>
</li>
<li>Downloads
<ul>
<li>CodeCharge</li>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
</ul>
</li>
<li>Support
<ul>
<li>Support</li>
<li>Forums</li>
<li>KB</li>
</ul>
</li>
<li>Purchase
<ul>
<li>Store</li>
<li>Resellers</li>
<li>Affiliate</li>
</ul>
</li>
<li>Company
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Press Releases</li>
</ul>
</li>
</ul>
</div>
IE Fix:
<script type="text/javascript">
startList = function() {
// code for IE
if(!document.body.currentStyle) return;
var subs = document.getElementsByName('submenu');
for(var i=0; i<subs.length; i++) {
var li = subs[i].parentNode;
if(li && li.lastChild.style) {
li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
}
li.onmouseout = function() {
this.lastChild.style.visibility = 'hidden';
}
}
}
}
window.onload=startList;
</script>
In your CSS, change #menu ul to position: relative:
#menu ul
{
margin: 0;
padding: 0;
position: relative;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
And remove the relative positioning from #menu ul li:
#menu ul li
{
/*position: relative;*/
}
This makes it a little difficult to get over to the subitems, though.
Here's a demo: http://jsfiddle.net/KvaTC/
If you give each ul that is a submenu an id, then you can specify in CSS for that ID a negative top value of whatever is necessary for each one. I would recommend setting a height value for the li tags concerned for two reasons, it will tell every browser to render them at the same height and you can calculate the negatives required - no javascript required to do this.
So, take out the top:0 in the following code block so it is like this:
#menu li ul {
position: absolute;
left: 149px; /*Set 1px less than menu width */
display: block;
}
Then set a height for each li concerned:
#menu ul li {
position: relative;
height:30px;
}
Then for each submenu ul give an id (I show the first one as an example):
<ul id=menuList>
<li>Products
<ul id="submenu1">
<li>All</li>
<li>CodeCharge</li>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
<li>Comparison<ul>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
</ul></li>
</ul>
</li>
Then the CSS:
#submenu1 {
top:0px;
}
Each subsequent id would then need negative values for whatever is required for them to be at the top. so for the second, now they have a definite height of 30px would be:
#submenu2 {
top:-30px;
}
JSFiddle: http://jsfiddle.net/Psyrus/C3xqX/
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 :)