I am trying to create a website and I need a multi level submenu.
I am facing 2 problems at the moment:
I dont know how to position the sub sub menu properly. It should appear next to the sub menu on the same height as the previous menu item and list downwards.
I don't know how to set that the sub sub menu only expands if I hover the corresponding sub menu item.
The code I am using is attached below.
I would appreciate if only the css is changed because the website runs with a programme that creates the html
The code is here: https://jsfiddle.net/TheBB23/Luxrakzq/
body {
margin: 0;
padding: 0;
background: #ccc;
color: #00782E;
font-family: Arial, Helvetica, sans-serif;
}
/* Header Leiste */
.nav{
width: 100%;
height: 70px;
background: #00782E;
position: fixed;
z-index: 2;
}
/* Hintergrund für Obermenüpunkte */
.nav ul {
width: 60%;
height: 70px;
list-style: none;
background: none;
text-align: center;
padding: 0;
margin-top: 0px;
margin-left: 25%;
margin-right: 15%;
position: fixed;
}
/* Position Menüoberpunkte */
.nav li {
line-height: 20px;
display: inline-block;
}
/* Style Menüoberpunkte */
.nav a{
text-decoration: none;
color: white;
width: auto;
display: block;
padding-top: 25px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.menulist {
display: none;
}
dropdown-content ul {
display: none;
}
/* Untermenü bei Hovern anzeigen*/
.dropdown:hover .menulist.menulist{
display: block;
margin-left: 0;
text-align: left;
width: 200px;
height: auto;
padding-top: 6px;
padding-bottom: 6px;
list-style: none;
margin-right: 0;
position: fixed;
background: white;
}
.menulist .menulist {
background-color: red !important;
width: 280px !important;
}
.dropdown:hover .dropdown-content ul ul {
display: none;
}
.menulist ul:hover .dropdown-content ul ul {
display: block !important;
}
/* Untermenüpunkte erster Ordnung Style*/
.menulist a {
color: #00782E;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 12px;
font-weight: 500;
width: 150px;
padding-left: 16px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
display: block;
text-align: left;
}
.menulist .menulist a {
font-size: 15px;
padding-top: 6px,
padding-bottom: 6px;
margin-right: 0px;
padding-right: 0px;
padding-left: 6px;
}
/* Abstand Untermenütext 1 zum Kasten */
.menulevel1 {
margin-left: 6px;
}
/* Untermenüpunkte 2. Ordnung Style */
.dropdown-menu a {
color: #00782E;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
font-weight: 500;
width: 150px;
padding-left: 16px;
padding-top: 1px;
padding-bottom: 1px;
text-decoration: none;
display: block;
text-align: left;
}
li a:hover, .dropdown:hover .dropbtn {
color: lightgrey !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class ="nav">
<ul>
<li class="dropdown">
Animals
<div class = "dropdown-content">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="lion">Lion</a>
</li>
<li class="menulevel1">
<a class=" " href="cat">cat</a>
</li>
<li class="menulevel1">
<a class=" " href="monkey">monkey</a>
</li>
<li class="menulevel1">
<a class=" " href="cow">cow</a>
</li>
<li class="menulevel1">
<a class=" " href="sheep">sheep</a>
</li>
<li class="menulevel1">
<a class=" " href="rat">rat</a>
</li>
</ul>
</div>
</li>
<li class="dropdown">
names
<div class = "dropdown-content">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Pete">Pete</a>
</li>
<li class="menulevel1">
<a class=" " href="Finley">Finley</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Jordan <span class="Jordan"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="calvin">Calvin</a>
<li class="menulevel2">
<a class=" " href="harry">harry</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="george">george</a>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
Thank you for your help
Related
I have an unordered linked list. I'm trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can't see it anymore or it's not on the right side of the page. Here is the HTML:
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks!
Assuming you're looking to move your .order element, you'll want to apply the float: right rule to the parent (<li>) element. I've added a class to this, .order-container, to make this easier to achieve in the following example.
Note also that once you float to the right, it will be off the screen by default. You'll want to set a negative margin-right to circumvent this. I've gone with margin-right: -10em in the following, to match the offset from the image on the left.
Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
float: right;
}
.order-container {
float: right;
margin-right: 10em;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="order-container">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex
/*Normalise body*/
body {
margin:0;
}
/*Set flex on the nabar top position logo and links*/
.navbar {
display: flex;
}
/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
margin-left: 5em;
}
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
/*Ad flex to the nav link element*/
display: flex;
/*Vertically center the links*/
align-items:center;
}
/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
margin-left: auto;
margin-right:1em;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
}
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
You should use media queries for making navbar responsive.
a {
text-decoration: none;
color: black;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px black;
}
.div-links {
display: flex;
align-items: center;
width: 70%;
}
.nav-links {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-links li {
padding: 2rem;
}
.nav-items {
width: 30%;
display: flex;
justify-content: space-around;
}
.order {
overflow: hidden;
color: #ffffff !important;
background: #1419e2;
text-decoration: none;
padding: 0.8rem;
border-radius: 5px;
}
<div class="navbar">
<a href="glacier_hills.html">
<img
src="Images/Glacier-Hills-Logo.svg"
alt=""
width="182"
height="90"
/>
</a>
<div class="div-links">
<ul class="nav-links">
<div class="nav-items">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="btn">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
</div>
I have a menu bar that I am trying to float right, I also have a logo that I would like to keep to the left.
I have been able to get the menu to float to the right and keep the logo on the right however the menu is being pushed down in is not in line with the logo.
How do I get the menu in line with the logo?
If I put float left on the logo it leaves a weird gap at the top and messes up the layout.
Here is my code
.navbar-collapse ul a {
font-family: "Barlow", sans-serif;
color: white;
text-decoration: none;
vertical-align: top;
}
.navbar-collapse ul a:hover {
background-color: white;
color: #23303e;
border-radius: 50px;
text-transform: uppercase;
font-weight: 900;
font-family: "Fraunces", serif;
padding: 10px 30px 10px;
}
}
.navbar-collapse ul {
padding: 0;
margin: 0;
float: right;
display: flex;
}
.navbar-collapse li {
display: inline;
float: left;
}
.logo {
width: 20%;
margin: 0 auto;
padding: 7.5px 10px 7.5px 0;
}
}
<nav>
<div class="container-fluid">
<a class="nav-brand" href="#page-top"><img src="images/logo.svg" class="logo" alt="Sunnyside Logo"></a>
<button class="navbar-toggle" type="button">
<img src="images/icon-hamburger.svg" class="hamburger" alt="hamburger">
</button>
<div class="navbar-collapse">
<ul>
<li class="nav-link text-center">About</li>
<li class="nav-link text-center">Services</li>
<li class="nav-link text-center">Projects</li>
<li class="nav-link text-center">Contact</li>
</ul>
</div>
</div>
</nav>
You need to put display: flex for .container-fluid that helps all your menu items on the same line as logo. To align right for menu items, you should put margin-left: auto for .navbar-collapse
Here is the full code
.navbar-collapse ul a {
font-family: "Barlow", sans-serif;
color: white;
text-decoration: none;
vertical-align: top;
}
.container-fluid {
display: flex;
}
.navbar-collapse {
margin-left: auto;
}
.navbar-collapse ul a:hover {
background-color: white;
color: #23303e;
border-radius: 50px;
text-transform: uppercase;
font-weight: 900;
font-family: "Fraunces", serif;
padding: 10px 30px 10px;
}
}
.navbar-collapse ul {
padding: 0;
margin: 0;
float: right;
display: flex;
}
.navbar-collapse li {
display: inline;
float: left;
}
.logo {
width: 20%;
margin: 0 auto;
padding: 7.5px 10px 7.5px 0;
}
}
<nav>
<div class="container-fluid">
<a class="nav-brand" href="#page-top"><img src="images/logo.svg" class="logo" alt="Sunnyside Logo"></a>
<button class="navbar-toggle" type="button">
<img src="images/icon-hamburger.svg" class="hamburger" alt="hamburger">
</button>
<div class="navbar-collapse">
<ul>
<li class="nav-link text-center">About</li>
<li class="nav-link text-center">Services</li>
<li class="nav-link text-center">Projects</li>
<li class="nav-link text-center">Contact</li>
</ul>
</div>
</div>
</nav>
W3Schools
Hello,
I've been trying to integrate a drop down menu based upon the hover over function of an image. I've gone to the above website which gives an example, but I cannot figure it out. Below is my current HTML. The image I would like to have the hover over function work on and from that have a drop down menu is the Logo.png file. I simply cannot figure out how to integrate this into my code. Any direction or help would be appreciated.
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logopic {
height: 100px;
width: 140px;
}
#logo {
float: left;
margin: 1%;
width: 160px;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
float: left;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
#topsection {
padding-top: 150px;
}
ul li {
list-style-position: inside;
}
<div id="menu">
<div id="logodiv">
<a href="index.html">
<img id="logo" src="images/Logo.png">
</a>
</div>
<div id="menulinks">
<ul id="options">
<a href="#income">
<li class="menuoptions">INCOME</li>
</a>
<a href="#expenses">
<li class="menuoptions">EXPENSES</li>
</a>
<a href="#incomedistribution">
<li class="menuoptions">INCOME DISTRIBUTION</li>
</a>
<a href="#spending">
<li class="menuoptions">SPENDING</li>
</a>
<a href="#sidemenu">
<li class="menuoptions">SIDE MENU</li>
</a>
</ul>
</div>
</div>
Use the sibligns selector "+"
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logopic {
height: 100px;
width: 140px;
}
#logo {
float: left;
margin: 1%;
width: 160px;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
float: left;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
#topsection {
padding-top: 150px;
}
ul li {
list-style-position: inside;
}
#menulinks {
display: none;
}
#logodiv:hover + #menulinks {
display: block
}
<div id="menu">
<div id="logodiv">
<a href="index.html">
<img id="logo" src="images/Logo.png">
</a>
</div>
<div id="menulinks">
<ul id="options">
<a href="#income">
<li class="menuoptions">INCOME</li>
</a>
<a href="#expenses">
<li class="menuoptions">EXPENSES</li>
</a>
<a href="#incomedistribution">
<li class="menuoptions">INCOME DISTRIBUTION</li>
</a>
<a href="#spending">
<li class="menuoptions">SPENDING</li>
</a>
<a href="#sidemenu">
<li class="menuoptions">SIDE MENU</li>
</a>
</ul>
</div>
</div>
Germano Plebani > I believe it won't work, because when you stop hovering the logo, the menu will disappear again.
I changed your code a bit to make it a bit more simple (at least, in my opinion) :
<div id="menu">
<ul>
<li id="logo"><img src="your_path"></li>
<li class="menuoptions">INCOME</li>
<li class="menuoptions">EXPENSES</li>
<li class="menuoptions">INCOME DISTRIBUTION</li>
<li class="menuoptions">SPENDING</li>
<li class="menuoptions">SIDE MENU</li>
</ul>
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logo {
height:140px;
}
#logo img{
width:160px;
}
ul{
height:inherit;
width:160px; /* Your menu has the size of your logo */
}
ul:hover {
width:auto; /* when you hover your menu, it will take 100% of the width of it's container */
}
ul li {
float: left;
list-style:none;
}
ul:hover .menuoptions {
display:block;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
display:none;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
I didn't go for optimization neither, but it works fine.
I'm really pulling my hair out on this one...I have a dropdown menu which is hidden but displays when the user hovers over a list item. However, the list item gets shifted downward on hover, instead of staying put. Which makes the menu shift further down than I want.
My code: http://codepen.io/anon/pen/PPYKJg
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
html {
overflow-y: scroll;
}
body {
margin: 45px 0px;
text-align: center;
background: #191919;
}
.header {
color: #FE353D;
}
#top-menu {
background-color:rgba(0,0,0,0.85);
height: 34px;
width: 49.1%;
float: right;
position: relative;
margin-top: 15px;
top: 21px;
left: 88px;
font: bold 20px sans-serif;
border-top-left-radius: 10px;
z-index: 10;
}
#top-menu:hover {
}
.more-menu {
background-color: #111111;
display: none;
position: relative;
top: 16px;
right: 25px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
.toplink {
margin-right: 35px;
}
ul {
text-align: left;
display: inline;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
margin-right: 30px;
padding-top: 5px;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
li.option {
margin-left: -30px;
margin-top: -25px;
}
$('#top-menu').hover(
function (){
$('.more-menu').css('display','inline');
},
function (){
$('.more-menu').css('display','none');
}
);
Any idea what's happening here? This is driving me crazy!
well all I could see is the .more-menu not diplaying right below the top menu so to fix that change the top property of the .more-menu class to this so to make the dropdown menu display right below the navigation menu
.more-menu {
background-color: #111111;
display: none;
position: relative;
top: 0px; /*this was 16px but is now 0px*/
right: 25px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
I made my own out of your HTML you can go off of.
JsFiddle: https://jsfiddle.net/469knbfq/
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
#header{ background: #000; padding: 15px 0px; }
#menunav{ }
#top-menu{ }
ul{ display: inline; margin: 0px; padding: 0px 0px 0px 20px; }
li{ display: inline; margin: 0px 10px; }
a{ color: #FFF; font-size: 18px; text-decoration: none; }
.more-menu{ background : grey; margin: 0px 0px 0px 20px; padding: 0px; display: none; }
JS:
$('#top-menu').mouseenter(function(){
$('.more-menu').css('display','inline-block');
});
$('#top-menu').mouseleave(function(){
$('.more-menu').css('display','none');
});
note: I am using JQuery
Thanks for the feedback...I actually wound up fixing my own problem by tweaking the CSS and the jQuery a bit. See below for the updated code:
http://codepen.io/anon/pen/ZbzvGQ
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
html {
overflow-y: scroll;
}
body {
margin: 45px 0px;
text-align: center;
background: #191919;
}
.header {
color: #FE353D;
}
#top-menu {
background-color:rgba(0,0,0,0.85);
height: 34px;
width: 49.1%;
float: right;
position: relative;
margin-top: 15px;
top: 21px;
left: 88px;
font: bold 20px sans-serif;
border-top-left-radius: 10px;
z-index: 10;
}
.more-menu {
background-color: #111111;
display: none;
position: absolute;
float: clear;
top: 35px;
right: -32px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
.toplink {
margin-right: 35px;
}
ul {
text-align: left;
display: inline;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
margin-right: 30px;
padding-top: 5px;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
li.option {
margin-left: -30px;
margin-top: -25px;
}
JQUERY:
$('#topmenu-other, .more-menu').hover(
function (){
$('.more-menu').css('display','inline-block');
},
function (){
$('.more-menu').delay(7500).queue(function(next){
$(this).css('display','none');
next();
});
}
);
This keeps the >> symbol in place when hovered over and also keeps more-menu displayed for a time while the user decides what option to choose.
Thanks again! :)
I'm new in HTML and CSS.
Want to create menu with image and also want to show menu separator, menu should be horizontally aligned.
when we hover mouse on menu item, image and text color should change.
It should be look like as per image.
sry I forgot to upload the code, uploading here.
but now I want to show some menu items on left side( left align) and others on right side( right align)
.mainmenu{
background-color: black;
}
.mainmenu {
margin-top: 20px;
display: inline-block;
position: relative;
width: 100%;
}
.mainmenu li a {
display: block;
position: relative;
text-decoration: none;
text-align: center;
font-size: 10px;
color: gray;
line-height: 32px;
font-weight: bold;
text-shadow: black 0 1px 0;
font-family: sans-serif;
border-right: 1px solid #030304;
border-left: 1px solid #36393C;
white-space: nowrap;
}
.mainmenu ul.menu {
margin: 0;
width: 100%;
}
.mainmenu ul.menu li {
float: left;
list-style: none;
width: 16.666666666666668%;
}
.mainmenu ul.menu li a:hover {
color: #76b900;
}
img {
border: 0;
vertical-align: middle;
max-width: 100%;
}
<div>
<div class="mainmenu ">
<ul class="menu">
<li>
<a href="#">
<img src="images/nav-icons/home.png">HOME</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/users.png">
USERS
</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/gallary.png">
GALLARY
<a/>
</li>
<li>
<a href="#">
<img src="images/nav-icons/community.png">
COMMUNITY
</a>
</li>
</ul>
</div>
Thanks
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px;
/* To sift text off the background-image */
color: #3E789F;
background: url("../images/mySprite.png") no-repeat;
/* As all link share the same background-image */
}
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
<ul class="menu">
<li class="firefox">Firefox
</li>
<li class="chrome">Chrome
</li>
<li class="ie">Explorer
</li>
<li class="opera">Opera
</li>
<li class="safari">Safari
</li>
</ul>