Not able to display the output in google chrome

Question

I was just trying to show some css effect.If a mouse moves into menu,then the submenu has to be slide down from top to bottom.It was working in FIREFOX but in the CHROME it was going from bottom to top.below is the HTML file.

And my three css files alshop_menu_boc.css

.gu4 {
    width: 234px;
}
.navUnitContainer .title {
    background: url("java3.png") no-repeat scroll right 13px #4B4B4B;
    bottom: 1px;
    color: #FF96ff;
    font-family: Arial;
    font-size: px;
    font-weight: bold;
    left: 1px;
    opacity: 1;
    padding: 10px 0 10px 10px;
    position: absolute;
    text-transform: uppercase;
    width: 221px;
    z-index: 2;
}
/*************************************CHANGE TO SLIDE UP**********************************
.navUnitContainer .content {
    font-size: 0;
    height: 216px;
    line-height: 0; 
}*/
.navUnitContainer .content img {
    border: 1px solid #DEDEDE;
    height: 212px;
    left: 0;
    position: relative;
    top: 0;
    width: 230px;
}
.navUnitContainer {
    margin-top: 2px;
    position: relative;
}
.navUnitContainer .links {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    height: 147px;
    left: 0;
    margin: 0 2px 2px 1px;
    opacity: 0;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
    visibility: hidden;
}
.navUnitContainer .links a {
    color: #FF96ff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.5em;
}
.navUnitContainer .links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
.navUnitContainer .links .view-all {
    bottom: 15px;
    font-weight: bold;
    margin-top: 10px;
    opacity: 0;
    position: absolute;
}
.navUnitContainer .links .view-all a {
    border: 1px solid #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    font-size: 16px;
    padding: 3px 5px;
}
.navUnitContainer .links .view-all a:hover {
    background-color: #FF96ff;
    color: #FFFFFF;
    text-decoration: none;
}
.navUnitContainer:hover .links {
    opacity: 1;
    transition-delay: 0s;/*************************************DELAY IN SLIDE DOWN******************************/
    visibility: visible;
}
.navUnitContainer:hover .links .view-all {
    opacity: 1;
}
.navUnitContainer:hover .title {
    background-color: #FF96ff;
    color:#FFFFFF
}
.navUnitContainer:hover .content img {
    border: 1px solid #FF96ff;
    left: 0;
    top: 0;
}
.browser-warn {
    padding: 10px;
}
.browser-warn .logo {
    background: url("../prod/images/browsers-d9f97dca.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 72px;
    width: 52px;
}
.browser-warn .IE {
    background-position: -51px 0;
}
.browser-warn .Firefox {
    background-position: -107px 0;
}
.browser-warn .Safari {
    background-position: -161px 0;
}
.browser-warn .Chrome {
    background-position: 1px 45px;
}

alshop_menu_style.css

@charset "utf-8";
.middle-product .links ul li {
    float: right;
    text-align: left;
    width: 100%;
}
.middle-product .links ul li a:hover {
    background-color: #FF96ff !important;
    text-decoration: underline !important;
}
.middle-product {
    float: center;
    margin: 10px auto;
    width: 738px;
}

.navUnitContainer {
    margin: 0 8px 10px;
    width: 231px !important;
}

alshop_menu_styles.css

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 16px;
}
body {
    background-color: #FFFFFF;
    color: #333333;
    font: 75%/150% Arial,Helvetica,sans-serif;
    text-align: center;
}
img {
    border: 0 none;
    max-width: 100%;
    vertical-align: top;
}
a {
    color: #888888;
    text-decoration: none;
}
a:hover {
    color: #CA0413;
    text-decoration: none;
}
:focus {
    outline: 0 none;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 10px;
}
h1 {
    font-size: 1.75em;
    font-weight: normal;
    line-height: 1.25em;
}
h2 {
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.6666em;
}
h3 {
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.2em;
}
h4 {
    font-size: 1.1666em;
    font-weight: bold;
}
h5 {
    font-size: 1em;
    font-weight: bold;
}
h6 {
    font-size: 1em;
    font-weight: bold;
}
form {
    display: inline;
}
fieldset {
    border: 0 none;
}
legend {
    display: none;
}
table {
    border: 0 none;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    font-size: 100%;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}
strong {
    font-weight: bold;
}
address {
    font-style: normal;
}
cite {
    font-style: normal;
}
q, blockquote {
    quotes: none;
}
q:before, q:after {
    content: "";
}
small, big {
    font-size: 1em;
}
sup {
    font-size: 1em;
    vertical-align: top;
}
ul, ol {
    list-style: none outside none;
}
.col-main {
    float: left;
}
.links li a, #mini-cart .block-title, .header .block-compare .block-title {
    line-height: 2.6666em;
    padding: 0 0.5833em;
}
.links li {
    float: left;
}
.links a {
    display: block;
}

Gidi9 · Accepted Answer

Your HTML code was not well formed. The Doctype was missing as well as some other minor errors. Try this one out.

In the CSS, float cannot be 'center'. It's either 'right' or 'left'.

Finally, also in your css, 'font-size' has a value of px. You should have a valid value eg '13px'.


    Insert title here
    
    
    



    
    
        
            Games
            
                
                
            
            
                
                     GTA

                    
                     WWE

                    
                     fifa 14

                    
                     fifa13

                    
                     View All »

Not able to display the output in google chrome

Answers (1)

Related Questions