IE markup with <ul> <li>

[westman]

I am not a fan of Internet Explorer but trying to get my html and css working well with it.

#nav {
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
    display:inline-block;
    width:0px auto;
	/*width:100%;
	text-align:right;*/
    margin:0px auto;
    padding:0;
    background:#5C5B5E; /* background color */

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    /*box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);*/
}
#nav li {
    margin:10px;
    float:left;
    position:relative;
    list-style:none;
}
#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:175px;
    position:absolute;
    background:#5C5B5E; /*sub background color*/
    border:1px solid #5C5B5E; /*sub border color*/

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}

<div style="position:relative; z-index:2;">    
<ul id="nav">
        <li><a href="?p=home#home">Home</a></li><br />
        <li><a href="?p=home#services">Services</a></li><br />
        <li><a href="?p=home#about">About us</a></li><br />
        <li><a href = "javascript:void(0)" onclick = "document.getElementById('signin').style.display='block';document.getElementById('fade').style.display='block'">Login</a></li>
</ul>
</div>

How do I get this to be IE friendly?

[Ingolme]

Which part of it is not working in Internet Explorer and which version of Internet Explorer are you testing?

[westman]

I am using IE 11.
Here is the output in chrome and ie 11

 

[dsonesuk]

IS this supposed to be a horizontal or vertical menu?

First : The br elements are not valid and not allowed as child of ul, remove them

IF you want this as a vertical menu, remove float: left;,  from LI elements and change to display: block;

IF you want horizontal removing the BR element will fix this, as the float: left; property will give you the horizontal li that you require.

[westman]

Thank you again Dsonsuk.
It works well.
I removed the junk and it is all vertical.