We Keep Coding

jQuery .toggle() child issue

I am having an issue where my jQuery will toggle when clicking within .mini-nav li rather than just .nav ul li. What would be the best way to fix this issue?
HTML:
<div class="nav">
<ul>
<li>
<img src="./assets/icon-down_arrow.png" />LoLNode
<ul class="mini-nav">
<li>Home</li><br />
<li>Popular</li><br />
<li>Create</li><br />
</ul>
</li>
</ul>
</div>
CSS:
.nav {
padding:5px 0;
background: -webkit-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
}
.nav > ul {
width:1000px;
margin:auto auto;
list-style-type:none;
}
.nav ul > li {
display:inline-block;
padding:10px 5px;
font-size:16px;
color:#FFF;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.nav ul li > .mini-nav {
min-width:92px;
position:absolute;
top:51px;
list-style-type:none;
background:#222;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
display:none;
}
.nav ul li .mini-nav > li {
display:inline-block;
padding:2px 5px;
background:#222;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
font-size:12px !important;
color:#FFF;
}
jQuery:
$('.nav ul > li:first-child').on('click', function() {
$('ul.mini-nav').toggle();
});

You need to stop event propagation when you click inner li, so that event doesn't bubble up to the outer list where it's handled, toggling inner one:
$('.nav > ul > li:first-child').on('click', function () {
$('ul.mini-nav').toggle();
});
$('ul.mini-nav').on('click', function (e) {
e.stopPropagation();
});
Demo: http://jsfiddle.net/8op8qt8w/
Also note that I fixed selector a little
.nav > ul > li:first-child
^-- here
One more thing: remove <br> after li. You want to make li block instead of inline-block if you want them to be rendered on the next line.

centering links in a drop down javascript menu

I have a drop down menu that has sub menus, the entire menu spans the whole width of the browser, right now the links are all positioned to the left of the screen. What I would like is my links to be all in the center of the screen, with the orange background still spanning the entire width of the browser.
Here is the code:
inside the head goes the javascript and the css, and the rest in the body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).children(":hidden").slideDown();
},function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
<style>
#menu{
height: 30px;
background-color:#F90;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>Info
<ul>
<li>example</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>

Add margin: auto and display: table:
css
#menu{
height: 30px;
background-color:#F90;
width:100%;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:auto;/*Add this*/
display: table;/*Add this*/
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
fiddle

Cannot center my span in firefox only

I have created a menu with some Jquery effects and it is working well across all browsers except Firefox (my last menu item is not centered) and i have no idea why is this happening...
It looks like this in Firefox:http://robertpeic.com/future%20net/problem/problem.png In other browsers it renders fine:http://robertpeic.com/future%20net/problem/other.pngTo solve this I did tried : added fixed width and height to my last anchor tag (fail), tried to add margin instead of padding (fail), tried to use Firefox hack via CSS it worked but breakes my CSS validation(fail),tried to increase padding a little bit and it looked OK in Firefox but breaked in every other browser(fail).
My last resort is to use browser sniffing but I really don't want to use this for such a small issue. Can someone help me to solve this problem?
FIDDLE EXAMPLE HERE
CSS code :
.menu{
position:relative;
display:block;
margin:0px auto;
height:37px;
background:url(http://robertpeic.com/future%20net/template%20images/menu-bg.png);
width:959px;
}
.menu ul{
list-style-type:none;
display:block;
width:990px;
margin:0 auto;
}
.menu ul li a{
float:left;
color:#4e4e4e;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
display:table-cell;
position:relative;
height:37px;
text-decoration:none;
background:url(http://robertpeic.com/future%20net/template%20images/main-menu-divider.png) 100% 0%;
background-repeat:no-repeat;
z-index:100;
padding:0px 18px 0px 18px;
line-height:37px;
text-align:left;
margin-left:2px;
}
.menu ul li a:hover{
float:left;
color:#780C71;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
display:table-cell;
position:relative;
height:37px;
text-decoration:none;
background:url(http://robertpeic.com/future%20net/template%20images/main-menu-divider.png) 100% 0%;
background-repeat:no-repeat;
z-index:100;
padding:0px 18px 0px 18px;
line-height:38px;
text-align:center;
margin-left:2px;
}
.mainhover{
background-color:#BFC0C1;
z-index:50;
position:absolute;
border-radius:5px;
moz-border-radius:5px;
border-top: 1px solid #A09F9F;
border-left: 1px solid #B5B3B3;
border-right: 1px solid #EFEFEF;
border-bottom: 1px solid #EDEDED;
}
.remove{
background-color:#C4C3C2;
z-index:50;
position:absolute;
border-radius:5px;
moz-border-radius:5px;
border-top: 1px solid #A09F9F;
border-left: 1px solid #B5B3B3;
border-right: 1px solid #EFEFEF;
border-bottom: 1px solid #EDEDED;
}
.menu ul li a.contact{
background-image:none;
padding:0px 30px 0px 23px;
text-align:center;
margin-left:6px;
}
Jquery code:
$(document).ready(function(){
var manageWidth = 14;
var manageHeight = 10;
var manageMargin = 6;
$('.menu ul li a').hover(function(){
var getHeight = $(this).outerHeight(true);
var getWidth = $(this).outerWidth(true);
$('<span class="mainhover" />').insertAfter($(this));
$('.menu ul li .mainhover').css({'width':getWidth-manageWidth,'height':getHeight-manageHeight,'margin-top':'4px','margin-left':-getWidth+manageMargin ,'opacity':'0'});
$('.menu ul li .mainhover').stop().animate({opacity:1},700);
//alert(getWidth);
},function(){
$('.menu ul li a').next().removeClass('mainhover').addClass('remove').stop().animate({opacity:0},700,function(){
$(this).remove();
});
});
});

I suggest you to don't use span, use div element to fix it.
Or you can try to add 'text-align:center;' to parent and 'text-align:left' to child.
Good luck

I think the problem is because of the .menu ul has a width of 990px, just use 100%;

What should I do to make this menu bar work well in Internet Explorer 7 and above?

I have a CSS template that I am trying to change it a little bit in order to use it in my website. I am facing a strange problem with it which I don't have any idea about how to fix it.
The menu bar at the top of the website designed in a such way when the user clicks on one of the options, that options will be inside a rectangle with a dark green color as shown in the following snapshot:
This rectangle implemented using the following CSS:
/* TOP MENU */
#nav{
position:relative;
z-index:200;
padding:0;
text-align:right
}
#topnav, #topnav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
}
#topnav{padding:25px 0 0 0; float:right}
#topnav a{
padding:0 20px 34px 20px;
color:#fff;
text-decoration:none;
}
#topnav li a:hover{
text-decoration: none;
}
#topnav li.current > a{}
#topnav li{
float:left;
position:relative;
font-size:12px;
padding:0 0 0 0px;
margin:0;
height:35px;
line-height:35px;
cursor:pointer;
}
#topnav li.last{padding:0; margin:0}
#topnav li li{
padding-right:0px;
display:block;
line-height:25px;
padding:0px 0px 0px 0;
margin-right:0;
text-align:left !important;
float:none;
}
#topnav ul {
position:absolute;
display:none;
width:160px;
top:58px;
left:0;
padding:15px 0 13px 0;
text-align:left;
background-position:0 13px !important
}
#topnav li ul a{
width:130px;
display:block;
margin:0 0px;
padding:8px 15px;
font-size:12px !important;
line-height:16px;
color:#fff;
text-align:left !important;
text-transform:capitalize;
}
#topnav li ul a:hover{}
#topnav ul ul{
top:0px;
}
#topnav li ul ul {
left:160px;
margin:0px 0 0 0px;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul{
display:none;
}
#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul{
display:block;
}
#topnav li.back {}
#topnav li.back {z-index:8;position: absolute;}
#topnav > li a, #topnav > li a:hover, #topnav > li a:visited{z-index:10;position:relative}
Also, the movement of this rectangle with the mouse movement depends on the following Javascript files:
<script type="text/javascript" src="./Scripts/jquery.lavalamp.js"></script>
<script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>
<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="./Scripts/jquery.preloader.js"></script>
My problem is most of the machines in my company use Internet Explorer 7 and the menu doesn't work with it properly. When I clicked in one of these options, nothing changed which means I did not get redirected to another page. Besides that, the rectangle shape keeps to be around the first option only. Why? And how to fix it?
Since I am developing as ASP.NET application, I put all the CSS and Javascript files in Master Page and for the menu bar, I developed as a User Control.
Here's a link to JSFiddle but it is not completed due to the missing of the images.
Sorry for that but I am not familiar with JSFiddle.

Replace
<script type="text/javascript" src="./Scripts/jquery.lavalamp.js"></script>
<script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>
<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="./Scripts/jquery.preloader.js"></script>
with:
<script>
if ($.browser.version < 9.0 && $.browser.msie) {
document.getElementsByTagName("head")[0].innerHTML = '<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script><script type="text/javascript" src="./Scripts/jquery.preloader.js"></script><script type="text/javascript" src="./Scripts/jquery.lavalamp.js"></script><script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>';
}
else {
document.getElementById("head")[0].innerHTML = '<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script><script type="text/javascript" src="./Scripts/jquery.preloader.js">';
}
​​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​

idTabs styling missing?

I've just discovered idTabs and I'm trying to get a simple one working on my webserver. I've copied the code on the page called 'Usual' and called the plugin file and jQuery but all I get is...
- Tab 1
- Tab 2
- Tab 3
This is tab 1.
Understandably this is un-styled as I'm yet to add CSS, but surely this is provided with idTabs? I don't see it anywhere. Where am I going wrong?

From http://www.sunsean.com/idTabs/main.css:
/* Style for Usual tabs */
.usual {
background:#181818;
color:#111;
padding:15px 20px;
width:500px;
border:1px solid #222;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10px Verdana;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#000;
background:snow;
border-bottom:1px solid snow;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
font:10pt Georgia;
}
.usual div a { color:#000; font-weight:bold; }