I'm trying to add sub menu under main menu items but failed to do so. I've added display:none to hide sub menu, display:block to show when mouse is over main menu etc to some of the tags in CSS but none of them worked. Perhaps I added to wrong places.
I've cleared all my faulty codes not to deal with messy code instead giving you clear one to modify it.
Sub menu shouldn't be visible unless mouse is over its parent menu. Also sub menu should appear right under its parent menu.
Thanks in advance
CSS
<style>
.menu{
width: 100%;
background-color: #666666; }
.menu ul{
margin: 0; padding: 0;
float: left;}
.menu ul li{
display: inline;
position: relative;}
.menu ul li a{
float: left; text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; }
.menu ul li a:hover, .menu ul li .current{
color: #fff;
background-color:#0b75b2;}
</style>
HTML
<div class="menu">
<ul>
<li>HOME
<ul>
<li>Home</li>
<li>Home short</li>
<li>Home very long</li>
</ul>
</li>
<li>ADMINISTRATOR
<ul>
<li>Admin</li>
<li>Admin short</li>
</ul>
</li>
<li>STAFF
<ul>
<li>staff</li>
</ul>
</li>
<li>LOGOUT</li>
</ul>
<br style="clear:left"/>
</div>
Change to .menu ul li ul{
position: absolute;}
If I understand your problem correctly, works fine now.
so..
.menu ul li ul{
position:absolute;
margin-top:40px;
width:150px;}
.menu ul li ul li{
display:block;}
To hide until hover, .menu ul li ul{ display:none; } .menu ul li:hover ul{display:block; }
Related
I have a three-level navigation, the third level (sub-submenu) displays when hover on the second one (submenu).
The sub-submenu appears relative to the parent item. But I want it to appear simply next to the submenu, so always on the same place, regardless which submenu-item gets hovered. So the first item of the sub-submenu (e.g. "Second-One") is always on the same height as the first item of the submenu ("First")
Here is a JSFiddle for my actual status: http://jsfiddle.net/fc0rwbqu/
Thanks in advance!
Code:
<ul id="nav">
<li>Home</li>
<li>Numbers
<ul>
<li>First
<ul>
<li>First-One</li>
<li>First-Two</li>
<li>First-Three</li>
</ul>
</li>
<li>Second
<ul>
<li>Second-One</li>
<li>Second-Two</li>
<li>Second-Three</li>
</ul>
</li>
<li>Third
<ul>
<li>Third-One</li>
<li>Third-Two</li>
<li>Third-Three</li>
</ul>
</li>
</ul>
</li>
CSS:
#nav {
position: relative}
#nav li a,#nav li { float:left;
margin-left: 20px;
background-color: #ddd;}
#nav li {
list-style:none;
position:relative;}
#nav li ul {
display:none;
position:absolute;
left:0; width: 100px;
top:90%;
padding:0;
margin:0;}
#nav li:hover > ul {
display:block;}
#nav li ul li {
float:none;
height: 35px;
min-width: 100px;
line-height: 35px;
border-right: 0;
display:block;}
#nav li ul li ul {
display:none; margin: 0 0 0 10px;
width: 100px; z-index:9999;
float: left !important; overflow: display;
background-color: #f06;}
#nav li ul li:hover ul {
left: 100px;
top:0;}
Something like this?? http://jsfiddle.net/fc0rwbqu/1/
Appled position: relative to ul tag.
I need some help with a navigation bar! I want to make it horizontal and they're all seperate, kinda like the bit next to the stack overflow thingy, (where it says: questions, tags etc.).
I tried just doing a menu but I realised that treats it all as one, not seperate things, so I added divs and everything went askew when I altered the CSS to make sure it gets eeverything within the divs, so I reverted it back to it's original menu form.
Here's my HTML:
<!-- navigation bar for: ALL PAGES --->
<nav style="width=100%;">
<ul id="menu">
<li>Welcome</li>
<li>Review
<ul>
<li>Customer Reviews</li>
<li>Leave a Review</li>
</ul>
</li>
<li>Gallery</li>
<li>Discounts
<ul>
<li>Refer us!</li>
<li>Claim discount</li>
</ul>
</li>
<li>Send me an email!
</li>
</ul>
</nav>
<!-- end navigation bar for: ALL PAGES --->
and my CSS:
/* nav */
#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}
#menu li {
float: left;
}
#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}
#menu li a:hover {
}
#menu, #menu ul {
margin:0 auto;
padding: 0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
Are you looking for this
Then use this
#menu li {
float: left;
position: relative;
list-style-type: none;
background:gray;
margin-left:10px;
margin-top:5px;
}
I'm currently in my last year of high school and I need to make a basic website.
I've hit a wall with creating my drop-down navlist though.
It works very well, but I have no idea how to make it so that if you scroll over one of the subitems, the background of the hovered-over item covers the whole item.
That sentence was pretty weird, I'm quite new to this.
I've used this jsfiddle thing to sketch the problem, http://jsfiddle.net/5EbSv/5/ .
On the second list item, you can see that the first two list items do not have a fully covered background on hover.
Check out the jsfiddle link for the best example of my problem.
This is the HTML:
<div class="navlist">
<ul id="menu">
<li>Item1</li>
<li>Item2
<ul>
<li>SubItem1</li>
<li>SubItem2</li>
<li>Making an example</li>
</ul>
</li>
<li>Item3
<ul>
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
<li>SubItem4</li>
<li>SubItem5</li>
</ul>
</li>
<li>Item4</li>
</ul>
</div>
and this is the CSS:
#menu a{
color: #0070A2;
}
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu {
display: inline-block;
list-style:none;
}
#menu li {
font-size: 14px;
background: #292A2C;
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
background: #292A2C;
color: white;
}
#menu li a {
display:block;
padding:10px 10px;
text-decoration:none;
font-weight:bold;
white-space: nowrap;
}
#menu li a:hover {
color: white;
background: grey;
}
Thanks for checking it out
You need to remove the left float for sub menus list items, e.g.
#menu li li {float:none;}
I have an existing HTML menu which I need to add further navigation to. I have added in the extra <ul> and <li> tags which I believe are in the correct place. The problem that I am having is getting the further options to drop down below the "Types of Claims" Option.
Here is the HTML code:
<div id="nav">
<ul>
<li>HOME</li>
<li>INJURY CLAIM CALCULATOR</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>TYPES OF CLAIMS
<ul>
<li>CLAIM 1</li>
<li>CLAIM 2</li>
<li>CLAIM 3</li>
</ul>
</li>
<li>CONTACT US</li>
</ul>
</div>
and here is the CSS code:
#nav ul li {
display: inline;
width: 100px;
}
#nav ul li a:link {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}
#nav ul li a:visited {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}
#nav ul li a:hover {
color: #FFF;
float: left;
padding-right: 45px;
text-decoration: underline;
}
#nav ul {
margin: 0px;
padding: 0px;
}
Any help will be greatly appreciated!
You need something like this:
#nav ul li ul {opacity:0;}
#nav ul li:hover ul {opacity;1;}
-or-
#nav ul li {display:relative;}
#nav ul li ul {display:absolute; top:-2000px;}
#nav ul li:hover ul {top:0;}
-or-
#nav ul li ul {width:150px; position:absolute; visibility:hidden; top:-2000px;}
#nav ul li:hover ul {visibility:visible;}
Basically, you need to tell the nested ul (unordered list) that it has 1 style for the parent li which makes it invisible, and another style for the parent li:hover which makes it visible somehow. There are multiple ways of achieving this.
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
You can use the
#nav ul li ul {visibility:hidden;} and
#nav ul li: hover ul {visibility:visible;}
I have a menu bar. The menu bar is horizontal. The sub menu is then extended vertically upon hovering. The items in this sub menu includes Manage subjects, Manual Crawl, Crawl Interval and Archive List. When the mouse is hover to Manage subjects, it should prompt another dropdown list at the right side of it to product a sub sub menu. However, I can make this sub sub menu to appear on the right. its over lapping my sub menu. as i am really new to CSS, i definitely need help in this. i have a feeling i am not even editing
#menu ul li ul li ul, #menu ul li ul li:hover ul ,#menu ul li ul li:hover ul li and #menu ul li ul li ul li a:hover. thank you.
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Executive Summary</li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li><a href="#" >Manage Subject</a></li>
<ul>
<li>Add Subject</li>
<li>Edit Subject</li>
<li>Delete Subject</li>
<li>Export Subject</li>
</ul>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background-color:#000;
text-align: center;
z-index:1;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu ul li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu ul li a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul li ul {
display: none;
width: 150px; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px;
}
#menu li li a{
height: 35px;
width: 150px;
float: left;
text-decoration: none;
padding: 0px;
margin: 0 0px;
color: #fff;
text-align: center;
}
#menu ul li ul li a:hover{
background: rgba(255,255,255,0.5);
width:150px;
float:left;
}
#menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
#menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
#menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
#menu ul li ul li ul li a:hover{
background-color: rgba(28,28,240,0.5);
width:150px;
float:left;
}
First Question
You have to wrap the submenus ul in the higher level menuitem li to make them appear correctly. Here is an easy example for the html structure.
<ul id="menu">
<li><a>mainmenu</a></li>
<li><a>mainmenu</a></li>
<li><a>mainmenu</a>
<ul>
<li><a>first level submenu</a></li>
<li><a>first level submenu</a></li>
<li><a>first level submenu</a>
<ul>
<li><a>second level submenu</a></li>
<li><a>second level submenu</a></li>
<li><a>second level submenu</a></li>
<li><a>second level submenu</a></li>
</ul>
</li>
<li><a>first level submenu</a></li>
<li><a>first level submenu</a></li>
</ul>
</li>
<li><a>mainmenu</a></li>
<li><a>mainmenu</a></li>
</ul>
Second Question
The trick for moving the second level submenus to the right was giving them the property left:150px.
#menu ul ul{
left:150px;
}
Improvements of your Stylecheet
By the way notice that you can specify all properties of a initially hidden box in css first. Then your :hover selector only needs to set the display:block rule to show the element. If it is hidden by display:none the already set background color won't be visible.
But there are other points you could improve your stylecheet, too. For example you can set properties for all submenus with the selector #menu ul (if your ul of the menu has the id menu) because they are all lists in your menu. If you want to only set something for the first level submenu you can use #menu > li > ul as it only approaches direct children. For the second level submenus use #menu ul ul.
Using these techniques your stylecheet is more abstract. My solution also works for and unlimited number of levels of submenus. You could for example implement a third level submenu only by adding the html code. The stylecheet can handle it.
Example
Here is a working fiddle of your example: http://jsfiddle.net/m8Bcb/4/
There you can see the improved source code (both html and css) and a working live demo. And with this edit the stylecheet is also commented for your understanding. I hope that helps you and you will continue learning css!
Your submenu needs to be inside of the list item of the parent menu.
Modify your HTML like so:
<ul>
<li>Home</li>
<li>Executive Summary</li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li><a href="#" >Manage Subject</a>
<ul>
<li>Add Subject</li>
<li>Edit Subject</li>
<li>Delete Subject</li>
<li>Export Subject</li>
</ul>
</li>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
</ul>
Notice that all I did was move the </li> to be after the </ul> of the submenu.
change your css like this
#menu ul li:hover > ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px;
}
when you hover li the whole ul shows, thats why you must select direct siblings.
and add
#menu ul li ul li ul {
display: none;
}
Just to add to danijar's js fiddle solution.
You may wish for all sub menus to display relative to the first list ('main menu items') however a better solution may be to display lists or 'sub menus' relative to their parent list item.
/* ensure each submenu displays relative to it's parent list item */
#menu ul li {
position: relative;
}
Here is an example of a menu that you may want to add the above line of styling for:
http://jsfiddle.net/codk1sgm/5/