I'm having trouble showing a drop down menu in the correct way. This is what I get to see:
This is my HTML code:
<nav class="menuBox">
<ul>
<li>HOME</li>
<li>KLASSEMENTEN</li>
<li>KALENDER</li>
<li>NIEUWS</li>
<li>MEDIA</li>
<li>LINKS</li>
<li>
INLOGGEN
<ul>
<li class="first">
ADMIN
</li>
<li>
EDIT ACCOUNT
</li>
<li class="last">
LOG OUT
</li>
</ul>
</li>
</ul>
</nav>
My CSS code:
/* ### menu Box ### */
.menuBox { position: absolute; top: 74px; right: 2px; }
.menuBox ul { list-style: none; }
.menuBox li { float: left; margin-left: 17px; font-size: 14px; text-transform: uppercase; }
.menuBox li a { color: #3f3f3f; text-decoration: none; display: block; padding-bottom: 14px; }
.menuBox li a:hover { background: url(../images/menu_hover.png) repeat-x 0 bottom; }
.menuBox ul li ul{ display: none; }
.menuBox ul li:hover ul{ display: block; }
I would like to have something like this:
But how can I do this?
add this to your CSS:
.menuBox ul li ul li {
display: block;
float:none;
}
Explanation: you're floating your li elements, but you need to clear the floats for the second level of li elements (those in the sub menus), thus you need to add this declaration.
See fiddle here
Related
I have the following menu structure:
<li id="nav-menu-item-226" class="menu-item-has-children">
About Us
<ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
<li class="sub-menu-item"><a href="...">...</li>
<li class="sub-menu-item"><a href="...">...</li>
</ul>
</li>
Unordered list has by default display: none.
What I need to get done is that whenever user hovers over parent page link, sub-menu would drop down.
In the best case, I would need to get it done with css only. I have tried many different snippets but none of them helped.
Give id to ul tag and give its style display:none.
then,
in your css
#id ul li:hover > ul { display:block }
This is how I would do it:
.sub-menu {
display:none;
}
.menu-item-has-children:hover > .sub-menu {
display:block;
}
Here is the JSFiddle demo
You could also get it work with jQuery to have a nice slideDown/slideUp effect.
jQuery:
;(function($){
$("#menu li:has(ul)").hover(function(){
$(this).find("ul").not(":animated").slideDown();
}, function(){
$(this).find("ul").not(":animated").slideUp();
});
})(jQuery);
CSS
#menu .sub-menu {
display: none;
}
HTML
<ul id="menu">
<li id="nav-menu-item-221" class="menu-item-has-children">
Home
<li id="nav-menu-item-226" class="menu-item-has-children">
About Us
<ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
<li class="sub-menu-item"><a href="...">...</li>
<li class="sub-menu-item"><a href="...">...</li>
</ul>
</li>
<li id="nav-menu-item-233" class="menu-item-has-children">
Third
</li>
</ul>
Working JSfiddle
All you really need to do is nest the <ul> within your <li> element.
<nav>
<ul>
<li>Link</li>
<li>
Link
<ul>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
Here's some CSS that will help you get started:
* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview Demo
I'm using the CSS lines below for a menu on a webpage.
The problem is that I don't know how to make that code apply only to the menu, and not to other ul -unordered lists- on the page!
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #AAF7BB;
font-size: 110%;
}
ul li:hover {
background: #ffffff;
color: #000000;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ffffff;
display: block;
color: #00ff00;
}
ul li ul li:hover { background: #ffffff; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Please help.
Try marking your ul as a class and refer to that instead of just ul.
<ul class="menu">
and change all instances of ul in the css to .menu.
Refering to just "ul" will apply the change to all ul elements.
As mentioned you can do this using classes on your html. I would try and Google this a little more. There are tons of example for menus out there.
In the top three is this:
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html
Something simple:
<ul class="menu">
<li class="menu-option">
Home
</li>
<li class="menu-option active">
About
</li>
<li class="menu-option">
Contact
</li>
<ul class="sub-menu">
<a>Something to click</a>
<li class="menu-option">
Contact
</li>
<li class="menu-option">
Contact
</li>
</ul>
</ul>
Your css would need to be updated similar to below
ul.menu:{
/*Your style for the menu*/
}
ul.menu li.menu-option:{
/*Your style for the menu's options*/
}
ul.menu ul.sub-menu:{
/*Your style for the menu's sub-menu's*/
}
Use the class or id attributes alongside your HTML elements. For example:
HTML
<ul class="class1">
...
</ul>
<ul class="class1">
...
</ul>
<ul id="class2">
...
</ul>
CSS
.class1{
implement css styling here
}
#class2{
implement css styling here
}
Here, the top 2 ul elements will be styled by the .class1 CSS styling, the final ul with the attribute #class2 will be styled by the corresponding CSS.
Note that . denotes classes in CSS and # denotes IDs
IDs are unique, classes are not unique. More information
I'm working on a website as part of a revision tool, however I cannot seem to get my menu's layout to function properly, when trying to create dropdowns for multiple sections on the same list they either spawn on top of each other or layout to the side of where they should be, to note, a solution should only be using HTML and CSS.
To clarify, the dropdowns should appear underneath their respective "title heading" so to speak.
#menu a:link {
color: #C7C1C1;
text-decoration: none;
}
#menu a:visited {
color: #C7C1C1;
text-decoration: none;
}
#menu a:hover {
color: #FFFFFF;
}
#menu {
text-align: center;
top: 0px;
position: absolute;
margin-bottom: -61px;
font-size: 20px;
}
#menu ul {} #menu ul li {
display: inline;
padding-left: 30px;
padding-right: 30px;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: inline-block;
top: 50px;
left:
/*when applying this makes all dropdowns stack*/
;
position: absolute;
background-color: #4D4D4D;
text-align: center;
}
<div id="menu">
<div>
<ul>
<li>Introduction
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>History
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>National Flags
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>International Maritime Signal Flags
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
</ul>
</div>
</div>
You need to add position: relative; to the parent element to position the child absolute to it:
#menu ul li{
display: inline;
padding-left: 30px;
padding-right: 30px;
position: relative; // IMPORTANT
}
and you should only add the display: inline-block property to the hover #menu ul li: hover ul and the rest of the styling within the normal class definition: (just for convenience)
#menu ul li ul{
display: none;
top: 50px;
position: absolute;
background-color: #4D4D4D;
text-align: center;
width: 100%;
}
Set position: relative; to <li>
#menu ul li{
display: inline;
padding-left: 30px;
padding-right: 30px;
position: relative; // add this
}
And then set left: 0; position to <ul>
#menu ul li:hover ul{
display: inline-block;
top: 50px;
left: 0px; // Begin on the left of the li
position: absolute;
background-color: #4D4D4D;
text-align: center;
}
I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus.
I would really appreciate someone checking the below code and your feedback, Thanks.
Solved the problem by changing one of the lines in css;
navigation ul li {float: left; list-style:none; }
HTML
<div id="navigationContainer">
<div id="navigation">
<ul>
<li class="borderleft">Home </li>
<li>Register </li>
<li>Search cars</li>
<li>Display all cars</li>
<li>Member Actions
<ul> <!-- Open drop down menu -->
<li class="bordertop">Login</li>
<li class="floatLeft">Member Area</li>
<li>Reservation</li>
<li>Contact us</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car</li>
<li>Delete a car</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
CSS
* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */
#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; }
#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; }
#navigation ul { list-style-type: none; }
#navigation ul li {float: left; position: relative; }
#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px;
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; }
#navigation ul li a:hover { background: blue; color: white; }
#navigation ul li ul { display: none; }
#navigation ul li:hover ul {display: block; position: absolute; }
#navigation ul li ul li {float:left; position:relative; }
#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }
#navigation ul li:hover ul li a:hover { background: blue;}
.bordertop { border-top: 1px solid white; }
.borderleft { border-left: 2px solid #e9e9e9;}
Try this
http://jsfiddle.net/Vf3AJ/
Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html
EDITED
Misread horizontal for vertical. tested in IE10, FF, and Chrome
As a side note: horizontal menus have serious issues depending on the width of the viewers screen.
CSS
nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
nav li a:hover {
background: blue;
color: white;
}
nav li ul {
display: none;
}
nav li:hover ul, nav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
nav li:hover li, nav li.hover li {
float: left;
}
nav li:hover li a, navbar li.hover li a {
color: #000;
}
nav li li a:hover {
color: white;
}
HTML
<div id="navigationContainer">
<nav id="navigation">
<ul>
<li class="borderleft">Home
</li>
<li>Register
</li>
<li>Search cars
</li>
<li>Display all cars
</li>
<li>Member Actions
<ul>
<!-- Open drop down menu -->
<li class="bordertop">Login
</li>
<!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
<li class="floatLeft">Member Area
</li>
<li>Reservation
</li>
</ul>
</li>
<li>Contact us
</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car
</li>
<li>Delete a car
</li>
</ul>
</li>
</ul>
</nav>
</div>
I have a drop down menu list made in css and plain HTMl. It works fine but it rolls under my image slider , and I can see on a part of the menu when i hover on any of my menu. I think z-index property is missing somewhere. But I used in my ul li tag but no use.
html
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
css
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
image slider has z-index property from java-script. so it will take high priority.
You need to give z-index to your navigation also.
Is your image slider having jQuery?
Than you have to put z-index in li ul li{z-index:999px;}.
If you add z-index to the following class.
li:hover ul {
display: block;
position: absolute;
z-index:1000;
}
Also make sure that the z-index for the menu is having higher property.