CSS/Jquery selectbox - selected option cannot align left? - javascript

I have been going crazy trying to get the selected option to align left like all the dropdown options.
I have inserted 'text-align:left;' in every css option but to no avail.
I have decided the javascript code must be doing something to the alignment of the selected option but am not proficient enough in javascript to locate what might be causing this.
Code is located at http://jsfiddle.net/X97cN/
CSS:
.ww-selectbox-div { margin-bottom:20px;margin-top:20px;}
.ww-selectbox a{ text-decoration:none; font-family:Arial; font-size:13px; font-weight:bold;}
.ww-selectbox .ww-select-area a span.center{ background-color:#fff; padding:5px 40px 5px 30px; border:1px solid #aaa; border-radius:5px; box-shadow:0 2px 3px #333; color:#444}
.ww-selectbox .ww-select-area a:hover span.center, .ww-selectbox .ww-select-areaactive a span.center{background-color:#eee; background-image:-moz-linear-gradient(center top,#FFF,#eee 5px,#eee 5px,#eee); background-image:-webkit-gradient(linear,left top,left bottom,from(#FFF),color-stop(0.2,#eee),color-stop(0.5,#eee),to(#eee)); color:#777; box-shadow:0 2px 3px #555}
.ww-selectbox .ww-select-areaactive a span.center{ border-radius:5px 5px 0 0}
.ww-selectbox .ww-select-area a span.arrow{ border-left:1px solid #AAA; height:8px; margin:5px 0 0 -23px; padding:2px 0 2px 5px; position:absolute; width:8px; background:url("../images/navigation/arrow_bottom.png") no-repeat scroll 5px 2px transparent; z-index:99}
.ww-selectbox .ww-select-areaactive a span.arrow{background:url("../images/navigation/arrow_top.png") no-repeat scroll 5px 2px transparent}
.ww-selectbox .ww-select-options{ background-color:#FFFBD9; position:absolute; border:1px solid #aaa; border-top:none; margin-top:4px; border-radius:0 0 5px 5px; box-shadow:0 2px 3px #555; z-index:100}
.ww-selectbox .ww-select-options ul{margin:0; padding:0}
.ww-selectbox .ww-select-options ul li { list-style:none; }
.ww-selectbox .ww-select-options ul li.option a{ color:#777; text-align:left; display:block; padding:5px 15px; border-bottom:dashed 1px #aaa}
.ww-selectbox .ww-select-options ul li.option a:hover{ background-color:#FFF8BA}
.ww-selectbox .ww-select-options ul li.option a.last{border:none; border-radius:0 0 5px 5px}
Javascript: (sorry for formatting better seen at http://jsfiddle.net/X97cN/)
(function(a){var m=function(b,h){var d=a(document.createElement("div")).addClass("ww-selectbox").insertBefore(b);d.append('<div class="ww-select-area"><span class="center">'+b.find(":selected").text()+'</span><span class="arrow arrowdown"></span></div>');var f=a('<div class="ww-select-options" style="display:none;"></div>').appendTo(d),c=a("<ul />").appendTo(f),e="",i="",g=b.find("option");g.each(function(b,j){j=a(j);e=j.val()?j.val():j.text();i=b+1==g.length?'class="last"':
"";c.append('<li class="option">"+j.text()+"</li>")});h.height>0&&c.height(h.height).css({"overflow-x":"hidden","overflow-y":"auto"});b.hide();return d},n=function(b,h,d){var f=a(b).find(".ww-select-area"),c=f.find("a"),e=c.find(".center"),i=a(b).find(".ww-select-options"),g=i.find("a"),l=function(a){c.width("").width(c.width());if(a.width>0&&c.width()>a.width){c.width("");var b=e.html().split("");e.html("");for(var d=0;c.width()+8<a.width&&d<
b.length;)e.html(e.html()+b[d]),c.width("").width(c.width()),d++;e.html(e.html()+"...");c.width(a.width)}a=g.first().outerWidth()-g.first().width()+(i.outerWidth()-i.width());g.width(c.outerWidth()-a)};c.click(function(){f.hasClass("ww-select-areaactive")?k(f,i):i.slideDown("fast",function(){g.removeClass("last");g.filter(":visible").last().addClass("last");f.addClass("ww-select-areaactive")})});g.click(function(){e.html(a(this).html());g.show().removeClass("last");a(this).hide();k(f,i);h.find("option[value='"+
a(this).attr("value")+"']").attr("selected","selected");h.change();l(d)});a(b).mouseenter(function(){a(this).addClass("ww-select-active")}).mouseleave(function(){a(this).removeClass("ww-select-active")});g.filter(function(){return a(this).html()==h.find(":selected").text()}).hide();l(d)},k=function(a,h){h.slideUp("fast",function(){a.removeClass("ww-select-areaactive")})};a.fn.wwselect=function(b){a(this).each(function(h,d){var f={width:0,height:0},c=a(d);b&&a.extend(f,b);var e=m(c,f);n(e,c,f)});a("body").click(function(){a(".ww-selectbox").each(function(b,
d){a(d).hasClass("ww-select-active")||k(a(d).find(".ww-select-area"),a(d).find(".ww-select-options"))})})}})(jQuery);

What about this ?
.ww-selectbox .ww-select-area a span.center {
padding:5px 40px 5px 12px;
/* ... */
}
Fiddle here: http://jsfiddle.net/X97cN/1/

Related

Slidetoggle not working properly when within LI

I am trying to show/hide div on click with slidetoggle, its working properly but when I click on input, its still showing/hiding, how do I make it working only on LI not on inner elements.
Here is the working JSfiddle Demo
Limitation I have is I can't bring that div out of LI as currently its within LI tag
Here is the function I have created for that:
$('#location').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
If you will trigger function while clicking parent div, it also will trigger when child is clicked, you can use immediate child selector,
$('#location > a').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
Are you looking for this?
I have added a class toggleable in <a> because there may be use
many <a> and in script i have selected 2 selector one toggleable
class and another one list item.
$('#location .toggleable, #location ul li').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
/*Location Popup*/
.location_contents {background: #fff; max-width: 450px; min-width: 450px; position: absolute; left: 0; top: 68px; width: 100%; z-index: 2; border-radius:4px; box-shadow:0 6px 8px -1px rgba(0, 0, 0, 0.5); display:none;}
.location_contents:after {bottom: 100%; left: 85%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(232, 248, 255, 0); border-bottom-color: #e8f8ff; border-width: 15px; margin-left: -15px;}
.location_contents_head {background: #e8f8ff; float: left; padding: 15px; width: 100%; box-sizing:border-box; color:#404040;}
.location_contents_head > input{width:100%; display:block; padding:8px; border:1px solid #d7d7d7; font-size:14px; color:#404040; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; height:45px;}
.location_contents_body{float:left; width:100%; background:#fff; padding:15px; box-sizing:border-box; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;}
.location_contents_body > ul{list-style:none; margin:0; padding:0;}
.location_contents_body > ul > li{display:block; float:left; font-size:14px; color:#404040; display:block; float:left; min-width:140px; text-align:left; padding:3px 0;}
.location_contents_body > ul > li > span {padding: 4px 10px; display:inline-block; transition: all 0.3s ease 0s; border-radius: 2px;}
.location_contents_body > ul > li:hover > span {background: #0076AA; color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_right">
<ul>
<li id="location" class="actbtn">
<i class="ico ico_location"></i> Delhi/NCR
<div class="location_contents" style="display: block;">
<div class="location_contents_head"><input placeholder="Enter Your City" type="text"></div>
<div class="location_contents_body">
<ul>
<li><span>Agra</span></li>
<li><span>Aligarh</span></li>
<li><span>Allahabad</span></li>
<li><span>Ambala</span></li>
<li><span>Amritsar</span></li>
<li><span>Bhopal</span></li>
<li><span>Chandigarh</span></li>
<li><span>Dehradoon</span></li>
<li><span>Delhi/NCR</span></li>
<li><span>Indore</span></li>
<li><span>Lucknow</span></li>
<li><span>Ludhiana</span></li>
<li><span>Mathura</span></li>
<li><span>Meerut</span></li>
<li><span>Patiala</span></li>
</ul>
</div>
</div>
</li>
<li id="login"><i class="ico ico_user"></i> Login</li>
</ul>
</div>

Popup boxes show up at the beginning, but should be hidden

I am trying to write a short html / javascript that shows popup boxes that I defined. IMPORTANT: They should not show up at the beginning.
However, they are also shown at the beginning (and not hidden). Do you have any idea what I'm doing wrong?
Here the code:
<script>
$(document).ready(function(){
setTimeout(function(event){ // Öffnet 1.Box nach x Sekungen
loadPopupBox(); -maxSpeed/0.1
}, 7000);
$("#popupclose").click(function(event){
unloadPopupBox(); // Schliesst 1. Box mit Click
setTimeout(function(event2) { // Öffnet 2. Box nach x Sekunden
loadPopupBox2(); -maxSpeed/0.1
}, 500);
setTimeout(function(event2) { // Schliesst 2. Box nach x Sekunden
unloadPopupBox2()
}, 3500);
setTimeout(function(event3){
loadPopupBox3(); -maxSpeed/0.1 //Öffnet 3. Box nach x Sekunden
}, 15000);
});
$("#popupclose3").click(function(event4)
{
unloadPopupBox3();
setTimeout(function(event4) {
loadPopupBox4(); -maxSpeed/0.1}, 500);
setTimeout(function(event4) { // Schliesst 4. Box nach x Sekunden
unloadPopupBox4()}, 3500);
setTimeout(function(event5) {
loadPopupBox5(); -maxSpeed/0.1 }, 15000);
});
$("#popupclose5").click(function(event6)
{
unloadPopupBox5();
setTimeout(function() { loadPopupBox6(); -maxSpeed/0.1}, 500);
setTimeout(function(event6) { // Schliesst 5. Box nach x Sekunden
unloadPopupBox6()}, 4500);
});
function loadPopupBox()
{
$("#popupbox").fadeIn("slow");
}
function loadPopupBox2()
{
$("#popupbox2").fadeIn("slow");
}
function loadPopupBox3()
{
$("#popupbox3").fadeIn("slow");
}
function loadPopupBox4()
{
$("#popupbox4").fadeIn("slow");
}
function loadPopupBox5()
{
$("#popupbox5").fadeIn("slow");
}
function loadPopupBox6()
{
$("#popupbox6").fadeIn("slow");
}
function unloadPopupBox()
{
$("#popupbox").fadeOut("normal");
}
function unloadPopupBox2()
{
$("#popupbox2").fadeOut("normal");
}
function unloadPopupBox3()
{
$("#popupbox3").fadeOut("normal");
}
function unloadPopupBox4()
{
$("#popupbox4").fadeOut("normal");
}
function unloadPopupBox5()
{
$("#popupbox5").fadeOut("normal");
}
function unloadPopupBox6()
{
$("#popupbox6").fadeOut("normal");
}
$("#popupbox").hide();
$("#popupbox2").hide();
$("#popupbox3").hide();
$("#popupbox4").hide();
$("#popupbox5").hide();
$("#popupbox6").hide();
});
</script>
<style>
#wings { margin-top:100px; margin-left:150px; font:bold 13px sans-serif; background:orange;
float:left; padding:6px; }
#popupbox { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:170px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox2 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:190px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose2 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox3 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:175px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose3 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox4 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:165px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose4 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox5 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:200px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose5 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
#popupbox6 { position:fixed; _position:absolute; /*hack for IE6*/ background:#81DAF5;
top:150px; border:2px solid lightblue; padding:15px; z-index:100px;opacity: .8;
font-size:15px; -moz-box-shadow: 0px 0px 5px lightgray; -webkit-box-shadow:0px 0px 5px lightblue;
box-shadow:0px 0px 5px lightblue; }
#popupclose6 { border:0px solid lightgray; color:#33CC33; font-family:sans-serif; font-weight:bold;
line-height:15px; float:left; cursor:pointer; text-decoration:none; }
</style>
<div id="popupbox">
<div style="height:75px; margin-left: 70px"><img id="popupclose" src="images/Picturenavigation.png" width="300" height="150" alt="Picturenavigation" title="Picturenavigation" border="0"></div>
</br></br>
<table>
</br></br></br>
<tr><td><center>Picturebook Navigation uses the coordinates of photos to navigate. </center></td></tr>
<tr><td><b><center>Click on the picture to start your journey.</center></b></td></tr>
</table>
</div>
<div id="popupbox2">
<div style="height:120px; margin-left: 60px"><img id="popupclose2" src="images/Naviroute3.jpg" width="300" height="150" alt="Naviroute3" title="Naviroute3" border="0"></div>
<table>
</br> </br>
<tr><td><center>Navigation with connect is that easy: You are on your way now!</center></td></tr>
</table>
</div>
<div id="popupbox3">
<div style="height:120px; margin-left:90px;"><img id="popupclose3" src="images/Connect_Menu.jpg" width="300" height="150" alt="Connect_Menu" title="Connect_Menu" border="0"></div>
<table>
</br></br>
<tr><td>Have you ever wondered about the latest news on your favorite team </br>or what the weather will look like at your travel destination?</td></tr>
<tr><td><b>Click on the connect menu to continue your drive and stay informed.</b></td></tr>
</table>
</div>
<div id="popupbox4">
<div style="height:120px; margin-left:60px;"><img id="popupclose4" src="images/Weather.jpg" width="300" height="150" alt="Weather" title="Weather" border="0"></div>
</br>
<table>
</br></br>
<tr><td><center>The weather is going to be nice tomorrow: No need for an umbrella.</center></td></tr>
</table>
</div>
<div id="popupbox5">
<div style="height:60px;"><img id="popupclose5" src="images/Bild1.png" width="80" height="76" alt="Bild1" title="Bild1" border="0"style="float:right;"></div>
</br>
<table>
<tr><td>Send a friend a message: <i>"Hi, it's me. I am on the way." </i></td></tr>
<tr><td></tr></td>
<tr><td>Type in this phone number in the space below: +1425637089.</td></tr>
<tr><td>Phone Number : <input type="text" size="30%"></td></tr>
<tr><td><b>Click on the picture to send the message.</b></td></tr>
</table>
</div>
<div id="popupbox6">
<div style="height:180px; margin-left:155px;"><img id="popupclose6" src="images/Message_received.png" width="125" height="190" alt="Message Received" title="Message Received" border="0"></div>
<table>
</br>
<tr><td>Look how easy this was! Your message already has been received.</td></tr>
</table>
</div>
My first recommendation would be to work on formatting your code a little more cleanly. It's much easier to find mistakes when everything is readable. In addition, your js contains a lot of repeat code, and is probably why this question is so heavily downvoted.
To the actual answer, you never actually hide your pop up boxes. In the css, you need to set #popupbox1 { display: none; } for each box on the page. Even better would be to use a class, but you don't really have that set up here.

Highlight menu item and its submenu item

I have this css code and I need to do this:
I have a dropdown menu with 5 items.
Item1 (root)
-Item2
-Item3
-Item4
-Item5
When I'm inside the page for example "Item4" I need that the "Item4" menu item and the "Item1 (root)" menu item are highlighted with a same color.
Thanks so much.
.menu-container{
}
.de-menu {
color:#333;
font-family:'Ovo';
font-weight:400;
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
float:right;
}
.de-menu {
display:inline-block;
padding:0px 0px 0px 0px;
margin:10px 0px 0px 0px;
height:93px;
}
.de-menu li {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
float:left;
display:inline;
list-style:none;
position:relative;
}
.de-menu a {
display:block;
padding:35px 14px 34px 14px;
line-height:30px;
text-decoration:none;
color:#fff;
}
.de-menu .current-menu-item a{
color:#e8c694;
}
.de-menu .current-menu-parent a{
color:#e8c694;
}
/*.de-menu .active a {
color:#red;
}*/
.de-menu li ul{
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
margin-left:25px;
padding:0;
}
.de-menu li li {
font-size:12px;
letter-spacing:normal;
text-transform:uppercase;
}
.de-menu li li a{
padding:5px 15px 5px 15px;
background:#64483E;
border-top:none;
}
.de-menu a:hover {
background:#64483E;
}
.de-menu li li a:hover{
border-top:none;
}
.de-menu li li a:hover {
background:url(../images/dotblack30.png) #513D32;
}
.de-menu li ul {
width:170px;
height:auto;
position:absolute;
top:100%;
left:-25px;
z-index:10;
display:none;
text-align:left;
}
.de-menu li li {
display:block;
float:none;
}
.de-menu li li ul{
margin-left:0;
}
.de-menu li:hover > ul {
display:block;
}
.de-menu li ul ul {
left:100%;
top:0px;
}
.de-menu li:hover a {
background:#64483E;
}
.de-menu select {padding:10px; height:36px; font-size:14px; border:none; background:#513D32; color:#fff;}
.de-menu select option{padding:10px;}
(this style is already in stylesheet around line 275, so just need to add background color)
.de-menu .current-menu-parent a {
background: #64483E;
}
(this would be to add to style sheet):
.de-menu .current-menu-parent .sub-menu .current-menu-item a {
background: url("../images/dotblack30.png") #513D32;
}
In my CSS file, "active" class has highlighting css values like
"background-color: #FFFFFF"
I'm using these in each page:
<script>
document.getElementById("PAGE_MENU_NAME_1").className = "active";
</script>
OR
<script>
document.getElementById("PAGE_MENU_NAME_2").className = "active";
</script>
OR
<script>
document.getElementById("PAGE_MENU_NAME_3").className = "active";
</script>
Use one of above for which page you are viewing.
This is my master page like "Menu.php"
<ul id="menu">
<li id="PAGE_MENU_NAME_1">PAGEMENUNAME1"</li>
<li id="PAGE_MENU_NAME_1">PAGEMENUNAME2"</li>
<li id="PAGE_MENU_NAME_3">PAGEMENUNAME3"</li>
</ul>
I hope you get what I said.

div element not growing

I wrote this menu that elements dynamically adds, but after adding elements the parent the div does not grow.
CSS:
#frstMenu
{
position:absolute;
top:1.5%;
right:1%;
width:23%;
height:70%;
background:rgba(0,0,0,0.6);
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
padding-top:1%;
overflow:hidden;
z-index:2;
}
.menulist1{
position:absolute;
width:100%;
height:15$;
top:0%;
right:0%;
dispaly:none;
text-decoration: none;
color: #333;
clear:both;
border-bottom: 1px solid #e6e8ea;
z-index:2;
}
#menulist
{
position:absolute;
top: 100%;
right: 1%;
width:23%;
height:500%;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
z-index:1;
}
HTML:
> <div id="firstMenuList">
> <div id="frstMenu">choose</div>
> <div id="menulist" class="menuList"></div>
> <div id="frstList1" class="menuList"></div> <- The child divs are similar this </div>
Javascript:
function ccc( prnt , id , cls, r ) {
var ar=new Array("hi","there","hello","world","adsad","asdsad","dsfsdfs","fdsfsdf","sfdsfsdf","soiqeqjek");
var parent=document.getElementById(prnt);
for (var i=0;i<ar.length;i++)
{
var node=document.createElement("div");
node.setAttribute("id",id+""+i);
node.setAttribute("class",cls);
node.setAttribute("onclick","select('"+id+""+i+"')");
node.style.top=(((i)*15)+2)+"%";
node.style.right=r+"%";
node.innerHTML=ar[i];
parent.appendChild(node);
}
parent.style.display="none";
}
And how do I call that function:
ccc("menulist","frstMenu","menulist1","0");
Image:
With position: absolute you must grow your menu inside loop (for) - just add height while you are adding each element.
Code for adding height without using jQuery should in your case look like this:
parent.style.width = parent.clientHeight + 20;
But its of course example and you must change "20" value to your own (calculated).

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%;

Categories