I'm trying to give my self some extra space to work with at the bottom of the site by adding bottom-padding: 50px; to the body in CSS but for some reason it does not add anything. I've seen people do this to make the page to a scrollable length but for me it literally does nothing no matter what.
This is the code so far:
body {
margin: 0px;
padding-bottom: 500px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 25px;
}
.nav-item a {
font-family: poppins, arial;
text-decoration: none;
color: black;
}
.nav-item:first-child {
margin-right: auto;
font-size: 16px;
}
.project-button {
height: 40px;
width: 100px;
border: none;
border-radius: 20px;
background-color: #86c232;
}
.projects-link {
font-size: 16px;
}
<body>
<header>
<nav>
<ul class="nav-list">
<li class="nav-item">
<strong> Tiam Nazari </strong>
</li>
<li class="nav-item">
Home
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<button class="project-button">
<a class="projects-link" href="">Projects</a>
</button>
</li>
</ul>
</nav>
</header>
</body>
The padding is working, you just don't have any content. Height controls the actual height of the element (basically the distance from the outermost edges of the container) whereas padding controls the distance between the content and the edges.
If you want space, add a static height and then remove it once all of your content is in. If you still want white space vertically or horizontally once the content is in, then use padding.
body {
margin: 0px;
}
section.first {
height: 800px;
background-color: orange;
padding-top: 4em;
}
section:not(.first) {
background-color: pink;
height: 600px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 25px;
}
.nav-item a {
font-family: poppins, arial;
text-decoration: none;
color: black;
}
.nav-item:first-child {
margin-right: auto;
font-size: 16px;
}
.project-button {
height: 40px;
width: 100px;
border: none;
border-radius: 20px;
background-color: #86c232;
}
.projects-link {
font-size: 16px;
}
<body>
<header>
<nav>
<ul class="nav-list">
<li class="nav-item">
<strong> Tiam Nazari </strong>
</li>
<li class="nav-item">
Home
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<button class="project-button">
<a class="projects-link" href="">Projects</a>
</button>
</li>
</ul>
</nav>
</header>
<section class="first">section 1</section>
<section>section 2</section>
</body>
It is working for me. Use background-color: red; to see how the body grows. Make sure you're connecting the documents correctly.
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 7 months ago.
For some reason, my nav bar is slightly set to the right. I've tried configuring everything to do with position but it doesn't seem to be working. I'm not sure if it's a CSS property or I just messed up with the configuration but it's a few pixels off-center no matter what. It might not be visible instantly (in the image) but I checked it with a virtual ruler and it is off.
header {
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show {
opacity: 0;
}
header:hover {
opacity: 1;
background: var(--main-header-background);
}
.nav-bar {
list-style: none;
position: relative;
display: inline-flex;
}
a.nav-link {
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active {
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
<header>
<nav>
<ul class="nav-bar">
<div class="bg"></div>
<li>
<a class="nav-link" href=""></a>
</li>
<li>
<a class="nav-link" href=""></a>
</li>
<li><a class="nav-link" href="">Test</a></li>
<li><a class="nav-link" href="">Test</a></li>
</ul>
</nav>
</header>
Just as a note it's about 50px off based on what I see in photoshop.
Add these properties to your CSS
* {
margin: 0;
padding: 0;
}
Sometimes the browser will apply its default margin and padding to the elements, which happened in your case, where the header has an unusual left margin. Thus, we set margin and padding of every element to 0.
* {
margin: 0;
padding: 0;
}
header {
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show {
opacity: 0;
}
header:hover {
opacity: 1;
background: var(--main-header-background);
}
.nav-bar {
list-style: none;
position: relative;
display: inline-flex;
}
a.nav-link {
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active {
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
<header>
<nav>
<ul class="nav-bar">
<div class="bg"></div>
<li>
<a class="nav-link" href="">Test</a>
</li>
<li>
<a class="nav-link" href="">Test</a>
</li>
<li><a class="nav-link" href="">Test</a></li>
<li><a class="nav-link" href="">Test</a></li>
</ul>
</nav>
</header>
nav {
display:block;
padding:10px;
margin:5px 55px 5px 55px;
}
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 can't seem to find a great way of sizing my logo to fit within the header, I am trying to get a result with the logo on the left side of the header and the naviagtion on the right side. I've tried this and it seems to work but I don't know if there's a better way to approach this. If anyone could give some tips it would be greatly appreciated.
My CSS and HTML
a {
text-align: center;
color: #232323;
text-decoration: none;
transition: .1s;
}
button {
border: none;
outline: none;
color: #f3f3f3;
cursor: pointer;
transition: .3s;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
padding: 1em 2em;
max-height: 20%;
width: 100%;
z-index: 2;
background-color: #ffffff;
}
.logo-wrapper {
display: inline-block;
overflow: hidden;
}
.logo-wrapper img {
height: auto;
width: auto;
max-width: 150px;
}
nav {
display: inline-block;
}
.nav-item {
display: inline-block;
margin: 0 1.5em;
}
.get-started {
background-color: #f27649;
padding: 1em 2em;
border-radius: 3em;
}
.get-started:hover {
filter: brightness(85%);
}
<header>
<div class="logo-wrapper">
<a href="/">
<img src="images/devchat.png" alt="DevTalk Logo">
</a>
</div>
<nav>
<ul>
<li class="nav-item">Learning</li>
<li class="nav-item">About</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Explore</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Login</li>
<li class="nav-item"><button class="get-started" href="#">Get Started <i class="fas fa-angle-right"></i></button></li>
</ul>
</nav>
</header>
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! :)