I cannot get my drop down menu items to display correctly. Each items in the list (4 of them) appear on top of each other. Any help is greatly appreciated.
this is my html:
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
and css:
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
top:15px;
left:0;
}
ul li ul li {
display:block;
float:none;
position:absolute;
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover
{
color:#E56038;
}
Many thanks in advance for your help
Remove 'position:absolute' and add 'clear:both; overflow:auto;' to the ul li ul li
Fiddle: http://jsfiddle.net/kc79mwbr/
<style>
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
/* display:block;
*/
/* float:left;
*/
padding:0px 15px;
}
nav ul li ul {
display: none;
/* position:relative;
*/
top:15px;
left:0;
}
ul li ul li {
/* display:block;
*/
/* float:left;
*/
/* position:relative;
*/
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
/* position:relative;
*/
/* float:left;
*/
}
nav ul li a:hover
{
color:#E56038;
}
/*span,a,li{
display:block;
}*/
</style>
<nav>
<ul >
<li>
<a href='#'>
<span>
SERVICES
</span>
</a>
<ul>
<li>
<a href='../escuela_eng.html'>
<span>
Equest Sch
</span>
</a>
</li>
<li>
<a href='../hst_eng.html'>
<span>
Horse Assist
</span>
</a>
</li>
<li>
<a href='../car_eng.html'>
<span>
Care and Recuperation
</span>
</a>
</li>
<li>
<a href='../ht_eng.html'>
<span>
Training
</span>
</a>
</li>
</ul>
</ul>
</nav>
I commented out a lot of the positioning and floating. I think they were causing problems. You could put a max-width on the menu if you wish it to be a certain width.
Please try this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
nav {
position:absolute;
right:0px;
/*bottom:0;*/
left:-.7em;
}
nav ul{
list-style:none;
}
nav ul li{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
/*you will need set top margine in such a way that there wont be any blank space between parent menu item and sub menu items*/
top:15px;
left:0;
/*line below will prevent displacement of submenu towards right*/
padding-left: 0;
}
ul li ul li {
display:block;
float:none;
/*position:absolute;*/
background: #F0EFE7;
padding:0px 10px;
overflow: auto;
clear: both;
}
ul li:hover ul {
display:block;
position:relative;
/*margin-left:-17px; */
}
nav ul li a{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover{
color:#E56038;
}
</style>
</head>
<body>
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
</body>
</html>
You will see following changes
ul li ul li doesn't need to have position:absolute - this was the main reason behind sub-menu items were overlapping each other.
Only for testing purpose I have commented nav's bottom:0;
Few of the suggestions
Please apply classes to ul's and li's
Manage padding and magines more efficiently.
Please refer following links for more info
StackExchange for Submenu CSS
CSS-Tricks for Submenu CSS
Your concerns
I have tested this code in Firefox and I can select the menu items.
Displacement of Sub-menu items has been taken care of in the updated code provided in the answer
To prevent certain alignment / float issues (with referenced to Latest Evetns and Contact) links you will need to test it with FLOAT attributes.
Related
I am trying to do a Menu that will appear when Window width is resized to a small resolution. Below is the HTML and CSS are below
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
CSS:
nav ul
{
list-style:none;
}
nav li{
display:inline;
line-height:1.5px;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
Output in Horizontal:
Home Articles Webinars
How can I bring back the list to Vertical then set "ul" position to absolute and make "nav a" to be visible. The list should display vertically like below
Home
Articles
Webinars
nav{
position:relative;
}
nav ul
{
position:absolute;
top:40px; /* this height is same as the menu.png */
left:0;
z-index:999;
list-style:none;
}
nav li{
list-style:none;
display:block;
}
nav ul li a{
display:block;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
Hi There can anyone help me i try to create a dropdown submenu but it doesn't work for me.
I dont know how to reate a nice menu.
example:
When i hover over "massages" then the menu must come down and show the submenu.
css here
.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;
Html:
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li>Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
Can anyone explane me how to create a dorpdown submenu on "Massages"
Thnx
Check with the below link.
Fiddle
/* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
}
ul#menu li ul.sub-menu a {
width:150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/* Top Nav Background Hover */
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a:hover {
background:#999;
}
/* 3rd level nav */
ul#menu li ul.sub-menu li ul {
display:none;
position: absolute;
top: 0px;
left: 115px;
width: 100px;
}
/* show the 3rd level when the second is hover */
ul#menu li ul.sub-menu li:hover ul {
display:block;
}
/* Menu Dropdown */
You should change your markup, as far as I know submenu should be part of list item it refers to
<ul>
<li class="simple-item">item</li>
<li class="submenu">item
<ul class="submenu-goes-inside-li">
<li class="simple-item">item</li>
<li class="simple-item">item</li>
<li class="simple-item">item</li>
</ul>
</li>
</ul
In your case submenu is separated from list items.
Using the same structure you have just add class to the drop menu,
set ul inside the dropMenu to display none, then to display on however. You can use css3 or jquery to make it have a nice animation or toggle.
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li class="dropMenu">Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu ul{
display:none
}
.menu:hover ul{
display:block;
}
if you want some better just use jquery http://api.jquery.com/toggle/
How do i make my second sub-menu appear when my mouse is hover my first sub-menu and on the right?
My codes.
My Fiddle
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My Menu</title>
<link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="corpo">
<header>
<div id="centeredmenu">
<ul>
<li > Menu1
<ul>
<li> Menu1Sub1</li>
<li> Menu1Sub1</li>
<li> Menu1Sub1</li>
</ul>
</li>
<li> Menu2</li> <!-- e preciso criar o ficheiro-->
<li> Menu3
<ul>
<li> Menu3Sub1
<ul>
<li> Sub1Sub1</li>
<li> Sub1Sub2</li>
<li> Sub1Sub3</li>
</ul>
</li>
<li> Menu3Sub2
<ul>
<li> Sub2Sub1</li>
<li> Sub2Sub2</li>
<li> Sub2Sub3</li>
</ul>
</li>
</ul>
</li>
<li> Menu4
<ul>
<li> Menu4Sub1</li>
<li> Menu4Sub2</li>
<li> Menu4Sub3</li>
</ul>
</li>
<li> Menu5
<ul>
<li> Menu5Sub1
<ul>
<li> Sub1Sub1</li>
<li> Sub1Sub2</li>
<li> Sub1Sub3</li>
</ul>
</li>
<li> Menu5Sub2
<ul>
<li> Sub2Sub1</li>
<li> Sub2Sub2</li>
<li> Sub2Sub3</li>
</ul>
</li>
</ul>
</li>
<li> Menu6
<ul>
<li> Menu6Sub1</li>
<li> Menu6Sub2</li>
<li> Menu6Sub3</li>
</ul>
</li>
<li> Menu7
<ul>
<li> Menu7Sub1</li>
<li> Menu7Sub2</li>
<li> Menu7Sub3</li>
</ul>
</li>
<li> Menu8
<ul>
<li> Menu8Sub1
<ul>
<li> Sub1Sub1</li>
<li> Sub1Sub2</li>
<li> Sub1Sub3</li>
</ul>
</li>
<li> Menu8Sub2
<ul>
<li> Sub2Sub1</li>
<li> Sub2Sub2</li>
<li> Sub2Sub3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</header>
</div>
</body>
body{
font-family: "Verdana", helvetica, Sans-serif;
font-size: 15px;
line-height: 20px;/*diferenca de alturas entre elementos dentro do mesmo sitio*/
background-color: #82c193;
width: 100%;
margin: auto;
}
#corpo{
min-width: 630px;
max-width: 80%;
margin: auto;
}
/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
font-size:80%; /* Menu text size */
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
}
/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 0px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:10px 7px 10px 7px;
font-size:12px;
line-height:15px;
background:#eaeaea;
text-decoration:none;
color:#1f1f1f;
font-weight:bold;
border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
color:#fff;
background:#273b26;
}
#centeredmenu ul li a:hover {
background:#2b6a29; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #2b6a29;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#2b6a29; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #2b6a29;
}
/* Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:35px;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:100px; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:10px;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#597258;
color:#fff;
line-height:12px; /* overwrite line-height value from top menu */
border-bottom:1px solid #fff; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#eaeaea; /* Sub menu items background colour */
color:#273b26;
float:left;
}
/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul {
display:block;
}
i would appreciate some explanations if you guys don't mind.
Thanks people.
PS: sorry my bad english.
Here is the solution for your menu.
I modified a little your example, to be transparent for me. I added new classes for your ul, li tags.
I didn't arranged the sub-submenu to right.
Here is the modified css for the menu:
body{
font-family: "Verdana", helvetica, Sans-serif;
font-size: 15px;
line-height: 20px;/*diferenca de alturas entre elementos dentro do mesmo sitio*/
background-color: #82c193;
width: 100%;
margin: auto;
}
#corpo{
min-width: 630px;
max-width: 80%;
margin: auto;
}
/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
font-size:80%; /* Menu text size */
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
}
/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 0px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:10px 7px 10px 7px;
font-size:12px;
line-height:15px;
background:#eaeaea;
text-decoration:none;
color:#1f1f1f;
font-weight:bold;
border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
color:#fff;
background:#273b26;
}
#centeredmenu ul li a:hover {
background:#2b6a29; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #2b6a29;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#2b6a29; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #2b6a29;
}
/* Submenu items */
.main-menu {
width: 100px;
}
.main-menu .sub-menu {
display:none; /* Sub menus are hidden by default */
position:absolute;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:100px; /* width of the drop-down menus */
}
.main-menu:hover .sub-menu {
display:block;
}
.main-menu .sub-menu .sub-sub-menu {
display: none;
}
.sub-menu li:hover .sub-sub-menu {
display: block;
}
.sub-sub-menu {
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:10px;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#597258;
color:#fff;
line-height:12px; /* overwrite line-height value from top menu */
border-bottom:1px solid #fff; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#eaeaea; /* Sub menu items background colour */
color:#273b26;
float:left;
}
/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}
And here is the modified html:
<body>
<div id="corpo">
<header>
<div id="centeredmenu">
<ul>
<li class="main-menu"> 1
<ul class="sub-menu">
<li> 1.1</li>
<li> 1.2</li>
<li> 1.3</li>
</ul>
</li>
<li class="main-menu"> 2</li> <!-- e preciso criar o ficheiro-->
<li class="main-menu"> 3
<ul class="sub-menu">
<li> 3.1
<ul class="sub-sub-menu">
<li> 3.1.1</li>
<li> 3.1.2</li>
</ul>
</li>
<li> 3.2
<ul class="sub-sub-menu">
<li> 3.2.1</li>
<li> 3.2.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</header>
</div>
</body>
Here is the fix for the sub-sub-menu positioning to right. But is not working perfectly, yet.
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
I need to align this navigation menu centered horizontally on the page. I would also like to reduce the size of the box the text appears in.
JSFiddle: http://jsfiddle.net/6W2qm/
HTML
<nav>
<ul class="navigation">
<li>Home</li>
<li>Biography</li>
<li>Media
<ul>
<li>Pictures</li>
<li>Videos</li>
</ul>
</li>
<li>Tour</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav {
height:100px;
list-style:none;
text-align:center;
width:1024px;
}
nav ul ul {
display:none;
padding:0;
position:absolute;
top:10%;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}
nav ul:after {
clear:both;
content:"";
display:block;
}
nav ul li {
float:left;
width:100px;
}
nav ul li a {
display:block;
padding:25px 40px;
text-decoration:none;
width:0;
}
nav ul ul li {
float:none;
position:relative;
}
nav ul ul li a {
padding:15px 40px;
}
I can't tell about the rest of your page when you only provided a small amount of the code, but this looks OK now.
JSFiddle: http://jsfiddle.net/D9z3s/
I changed the following line to 50% instead of 10% and it doesn't overlap anymore:
nav ul ul {
padding: 0;
position: absolute;
top: 50%;
}