We Keep Coding

Display table properly using tabs

I have an order tracking system with collapsible containers which contains tabs with a different table. However, whenever the user clicks the second order number and chooses a tab, the table will not show where it supposed to be but shows on the first order number table. For example, I chose order number 67890 and tabbed it to logistics, it should show the logistics table on the 67890 rows but it remained static and showed the table on the first row which is order number 12345.
How can I show the table with correspond to the chosen order number and tab? Please help
jQuery(document).ready(function() {
jQuery('.closedArrow').click(function() {
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
});
});
</script>
<script type="text/javascript">
function addRow(){
var table = document.getElementById("Section3_table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("Section3_table");
table.deleteRow(index);
}
.closedArrow {
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->
padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor:pointer;
}
.openArrow {
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
padding-left: 20px;
cursor:pointer;
}
.steps {
margin:0 0 20px;
padding:0;
list-style:none;
overflow:hidden;
}
.green {
background:#7dba00 !important;
color: #666666 !important;
}
.grey {
color: #666666 !important;
}
.open .green:after {
border-left-color: #7dba00 !important;
}
.wrap .num.last:after {
display:none
}
.wrap .num.last:before {
display:none
}
.black {
background:#000 !important;
color:#fff!important;
}
.open .black:after {
border-left-color: #000 !important;
color:#fff!important;
}
.steps li {
float:left;
position:relative;
}
.wrap {
float:left;
}
.num {
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
background:#7dba00;
color:#000;
font-weight:bold;
text-align:center;
float:left;
position:relative;
margin:0 4px 0 0;
}
.num b, .steps p span {
position:relative;
z-index:2;
display:block;
}
.num:after {
content:" ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position:absolute;
right:-4px;
top:1px;
}
.steps p {
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
}
.closed .num:after {
border-left-color:#000
}
.closed .num {
color:#fff;
background:#000
}
.closed .num.last:after {
display:none
}
.open .num:after {
border-left-color:#ccc;
border-top-color:transparent;
border-bottom-color:transparent;
z-index:1;
}
.open .num:before {
width: 0;
height: 0;
content:" ";
position:absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:-5px;
top:0;
z-index:0;
}
.open .num {
background:#ccc;
}
.open .wrap {
border-radius:15px 0 0 15px;
border:1px solid #7dba00;
}
li.open:after {
content:" ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:0;
top:0;
z-index:0;
}
li.open:before {
width: 0;
height: 0;
content:" ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position:absolute;
right:1px;
top:1px;
z-index:1;
}
.expanded {
display:none;
<!--bbackground-color: red;-->
padding-right: 900px;
}
.tab {
<!--background-color: yellow; -->
<!--border: 2px solid black; -->
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
}
.column {
float: left;
width: 25%;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
.completed span {
background-color:NONE;
color:#95db89;
border:2px solid #95db89;
}
.todo span {
background-color:none;
color:#E1E6EB;
border:2px solid #E1E6EB;
}
.list span {
color:#58D68D;
font-weight:500;
font-size: 12px;
}
.breadcrumb-pagination div p {
text-align:center;
line-height:0;
margin:30px auto 25px;
}
.active p {
border-bottom:2px solid #00abc9;
padding-bottom:27px;
margin-bottom:0px !important;
color: #3c4043;
font-weight:700;
}
.completed p {
color:#bsb7c1;
}
.list p {
color:#3c4043;
font-weight:700;
}
.completed span::before {
content: '\2713'
}
.title{
text-align:center;
text-decoration: none;
margin-left: 365px;
color: #444;
}
table {
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
}
th {
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
}
th:after {
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
}
th:first-child {
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
}
th:last-child {
box-shadow: inset -1px 1px 0 #999;
}
td {
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px ;
position: relative;
transition: all 300ms;
}
td:first-child {
box-shadow: inset 1px 0 0 #fff;
}
td:last-child {
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
}
tr {
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
}
tr:nth-child(odd) td {
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
}
tr:last-of-type td {
box-shadow: inset 0 -1px 0 #fff;
}
tr:last-of-type td:first-child {
box-shadow: inset 1px -1px 0 #fff;
}
tr:last-of-type td:last-child {
box-shadow: inset -1px -1px 0 #fff;
}
h1 {
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
}
a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab {
text-align: center;
}
.tab .nav-tabs{
display: inline-block;
position: relative;
border-bottom: none;
}
.tab .nav-tabs li{
margin: 0;
}
.tab .nav-tabs li a{
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a span {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
}
.tab .nav-tabs li.active a span{
background: #29335c;
color: #fff;
}
.tab .nav-tabs li a span i{
transform: rotate(-45deg);
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
color: black;
border: none;
border-bottom: 2px solid #fff;
}
.tab .nav-tabs li.active a{
border-bottom: 2px solid #29335c;
}
.tab .tab-content{
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
}
.tab .tab-content .tab-pane #Section3_table {
margin-left: -8px;
}
.tab .tab-content h3{
font-size: 24px;
margin-top: 0;
}
#media only screen and (max-width: 479px){
.tab .nav-tabs li{
width: 100%;
text-align: center;
margin-bottom: 5px;
}
.tab .nav-tabs li:last-child{
margin-bottom: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Bag</td><td>1pc; Green</td></tr>
<tr><td>Pouch</td><td>1pc; Blue</td></tr>
<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>John Smith</td></tr>
<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Dress</td><td>1pc; Yellow</td></tr>
<tr><td>Hat</td><td>1pc; Green</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>Jane Doe</td></tr>
<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

The main problem comes from the duplicate id's, #Section1,#Section2,#Section3,#Section4 I have changed them in the second row to #Section5,#Section6,#Section7,#Section8 and you could see that it works.
NOTE: The id must be unique in the same document.
.closedArrow {
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
}
.openArrow {
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
}
.steps {
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
}
.green {
background: #7dba00 !important;
color: #666666 !important;
}
.grey {
color: #666666 !important;
}
.open .green:after {
border-left-color: #7dba00 !important;
}
.wrap .num.last:after {
display: none
}
.wrap .num.last:before {
display: none
}
.black {
background: #000 !important;
color: #fff!important;
}
.open .black:after {
border-left-color: #000 !important;
color: #fff!important;
}
.steps li {
float: left;
position: relative;
}
.wrap {
float: left;
}
.num {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
}
.num b,
.steps p span {
position: relative;
z-index: 2;
display: block;
}
.num:after {
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
}
.steps p {
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
}
.closed .num:after {
border-left-color: #000
}
.closed .num {
color: #fff;
background: #000
}
.closed .num.last:after {
display: none
}
.open .num:after {
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
}
.open .num:before {
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
}
.open .num {
background: #ccc;
}
.open .wrap {
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
}
li.open:after {
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
li.open:before {
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
.expanded {
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
}
.tab {
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
}
.column {
float: left;
width: 25%;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
.completed span {
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
}
.todo span {
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
}
.list span {
color: #58D68D;
font-weight: 500;
font-size: 12px;
}
.breadcrumb-pagination div p {
text-align: center;
line-height: 0;
margin: 30px auto 25px;
}
.active p {
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
}
.completed p {
color: #bsb7c1;
}
.list p {
color: #3c4043;
font-weight: 700;
}
.completed span::before {
content: '\2713'
}
.title {
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
}
table {
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
}
th {
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
}
th:after {
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
}
th:first-child {
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
}
th:last-child {
box-shadow: inset -1px 1px 0 #999;
}
td {
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
}
td:first-child {
box-shadow: inset 1px 0 0 #fff;
}
td:last-child {
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
}
tr {
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
}
tr:nth-child(odd) td {
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
}
tr:last-of-type td {
box-shadow: inset 0 -1px 0 #fff;
}
tr:last-of-type td:first-child {
box-shadow: inset 1px -1px 0 #fff;
}
tr:last-of-type td:last-child {
box-shadow: inset -1px -1px 0 #fff;
}
h1 {
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
}
a:hover,
a:focus {
outline: none;
text-decoration: none;
}
.tab {
text-align: center;
}
.tab .nav-tabs {
display: inline-block;
position: relative;
border-bottom: none;
}
.tab .nav-tabs li {
margin: 0;
}
.tab .nav-tabs li a {
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a span {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
}
.tab .nav-tabs li.active a span {
background: #29335c;
color: #fff;
}
.tab .nav-tabs li a span i {
transform: rotate(-45deg);
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover {
color: black;
border: none;
border-bottom: 2px solid #fff;
}
.tab .nav-tabs li.active a {
border-bottom: 2px solid #29335c;
}
.tab .tab-content {
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
}
.tab .tab-content .tab-pane #Section3_table {
margin-left: -8px;
}
.tab .tab-content h3 {
font-size: 24px;
margin-top: 0;
}
#media only screen and (max-width: 479px) {
.tab .nav-tabs li {
width: 100%;
text-align: center;
margin-bottom: 5px;
}
.tab .nav-tabs li:last-child {
margin-bottom: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

How to create a left/right border with triangular shape instead of trapezoidal?

I want a label with triangular shape in left and right, but I can only create trapezoidal shape:
.borderLeft{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border-right:0.5em solid orange;
border-top:0.5em solid transparent;
border-bottom:0.5em solid transparent;
}
.borderRight{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border-left:0.5em solid orange;
border-top:0.5em solid transparent;
border-bottom:0.5em solid transparent;
}
<table cellspacing="0" style="font-size:50px;">
<tr>
<td class="borderLeft"/>
<td style="background-color:orange;">abcde</td>
<td class="borderRight"/>
</tr>
</table>
is there any way to change the border at 2 sides from trapezoidal to triangular shape?

you can use after and before selectors to do that.
check this answer:
.main {
margin: 50px auto 0;
width: 200px;
height: 40px;
position: relative;
background: red;
text-align: center;
color: white;
line-height: 40px;
/* to vertical align text */
}
.main:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.main:after {
content: "";
position: absolute;
left: -40px;
bottom: 0;
width: 20px;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
transform: rotate(180deg);
}
<div class="main">ABCDE</div>

0.5em is no enough to creat a triangular shape.Becoues td's height is 2em.
.borderLeft{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border-right:0.5em solid orange;
border-top:1em solid transparent;
border-bottom:1em solid transparent;
}
.borderRight{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border-left:0.5em solid orange;
border-top:1em solid transparent;
border-bottom:1em solid transparent;
}
<table cellspacing="0" style="font-size:50px;">
<tr>
<td class="borderLeft"/>
<td style="background-color:orange;">abcde</td>
<td class="borderRight"/>
</tr>
</table>

Try this:
.borderLeft {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-right: 0.5em solid orange;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
.borderRight {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-left: 0.5em solid orange;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
<table cellspacing="0" style="font-size:50px;">
<tr>
<td class="borderLeft" />
<td style="background-color:orange;line-height:0">abcde</td>
<td class="borderRight" />
</tr>
</table>
You just need to set line-height to 0 for the 2nd td. Move the CSS to the CSS file instead of inline.

Use linear-gradient and you can achieve this with one element and it will be responsive:
.box {
padding:10px 40px;
margin:5px;
display:inline-block;
background:
linear-gradient(to top right,orange 50%,transparent 50.5%) top right/40px 50%,
linear-gradient(to bottom right,orange 50%,transparent 50.5%) bottom right/40px 50%,
linear-gradient(to bottom left,orange 50%,transparent 50.5%) bottom left/40px 50%,
linear-gradient(to top left,orange 50%,transparent 50.5%) top left/40px 50%,
linear-gradient(orange,orange) center/calc(100% - 80px) 100%;
background-repeat:no-repeat;
}
<div class="box">some text</div>
<div class="box">loooooooooooooooog text</div>
<div class="box">two line <br> text</div>
<div class="box">three<br> line <br> text</div>

You can do a CSS trick pointed at https://css-tricks.com/snippets/css/css-triangle/. This is an example with label (you can change margin and font sizes to match your text)
.arrow-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid orange;
}
.arrow-up > div {
position:absolute;
margin-top:30px;
margin-left:-30px;
font-size: 40px;
}
<div class="arrow-up"><div >test</div></div>

How to to reposition the unordered list element <li> in dropdown menu so it will display in the dropdown column

The li elements not in the dropdown box
Please help me to reposition the unordered list element <li> in dropdown menu so it will display in the dropdown column.
Below my HTML and CSS code:
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
margin:0;
}
img {
width: auto;
max-height: 100%;
}
/* Navigation Bar */
#menu {
list-style:none;
margin: 50px auto auto auto;
position: fixed;
top: -50px;
background: #1a1a1a;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: #1a1a1a;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
body {behavior: url("csshover3.htc");}
#menu li .drop {
background:url("img/drop.gif")
no-repeat right 8px;
}
#menu li {
border-style: none;
border-color: inherit;
border-width: medium;
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:15px;
top: -3px;
left: 368px;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
h1.header-line, h2.header-line,
h3.header-line, h4.header-line,
h5.header-line, h6.header-line{
padding-bottom: 21px;
margin-bottom: 11px;
position:relative;
}
/* Drop Down */
.dropdown_1column, .dropdown_2columns,
.dropdown_3columns, .dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Columns */
.col_1,.col_2,.col_3,.col_4,.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:150px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
.col_1 ul li {
float:right;
display:inline;
}
/* Right alignment */
#menu .menu_right {
float:right;
margin-right:200px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
/* text-shadow: 1px 1px 1px #FFFFFF; */
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
<div>
<ul id="menu" style="height: 55px; z-index: 100; left: 1px;">
<li style="text-align: left; top: -3px; left: 6px; width: 160px; ">
<a class="drop" style="font-size: x-large"> ☰ Menu</a>
<div class="dropdown_5columns">
<!-- Begin 4 columns container -->
<div class="col_5">
<h3 style="text-align:center">INFORMATION TECHNOLOGY</h3>
</div>
<div class="col_1">
<h3>Home</h3>
<ul>
<li>IT Home</li>
<li>IT Online Application</li>
<li>Silt Intranet</li>
<li>Silt.com</li>
</ul>
</div>
<div class="col_1">
<h3>Training Guide</h3>
<ul>
<li>Email</li>
<li>Meeting Room</li>
<li>IT Orentiation Guide</li>
<li>KingSoft</li>
<li>Security Awareness</li>
</ul>
</div>
<div class="col_1">
<h3>Organization</h3>
<ul>
<li>Organization Chart</li>
<li>*****</li>
</ul>
</div>
<div class="col_1">
<h3>Policies & Procedure</h3>
<ul>
<li>Policies</li>
<li>Mailbox Quota</li>
<li>Escalation</li>
<li>DRP</li>
</ul>
</div>
</div>
</li>
<li class="auto-style1">Welcome to IT Portal</li>
</ul>
</div>
I don't know how to re-position the <li> element so it will display in the drop down column. Now my <li> elements display out of the drop down column to the center of the page.

Just Add left:0 in #menu li ul li class and it's work
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
margin:0;
}
img {
width: auto;
max-height: 100%;
}
/* Navigation Bar */
#menu {
list-style:none;
margin: 50px auto auto auto;
position: fixed; /* Set the navbar to fixed position */
top: -50px; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
/* Background color and gradients */
background: #1a1a1a;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: #1a1a1a;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
body {behavior: url("csshover3.htc");}
#menu li .drop {
background:url("img/drop.gif")
no-repeat right 8px;
}
#menu li {
border-style: none;
border-color: inherit;
border-width: medium;
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:15px;
top: -3px;
left: 368px;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
h1.header-line,
h2.header-line,
h3.header-line,
h4.header-line,
h5.header-line,
h6.header-line{
padding-bottom: 21px;
margin-bottom: 11px;
position:relative;
}
/* Drop Down */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Columns */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:150px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
.col_1 ul li {
float:right;
display:inline;
}
/* Right alignment */
#menu .menu_right {
float:right;
margin-right:200px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
/* text-shadow: 1px 1px 1px #FFFFFF; */
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
left:0;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
}
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
<div>
<ul id="menu" style="height: 55px; z-index: 100; left: 1px;">
<li style="text-align: left; top: -3px; left: 6px; width: 160px; ">
<a class="drop" style="font-size: x-large">☰ Menu </a>
<div class="dropdown_5columns">
<!-- Begin 4 columns container -->
<div class="col_5">
<h3 style="text-align:center">INFORMATION TECHNOLOGY</h3>
</div>
<div class="col_1">
<h3>Home</h3>
<ul>
<li>IT Home</li>
<li>IT Online Application</li>
<li>Silt Intranet</li>
<li>Silt.com</li>
</ul>
</div>
<div class="col_1">
<h3>Training Guide</h3>
<ul>
<li>Email</li>
<li>Meeting Room</li>
<li>IT Orentiation Guide</li>
<li>KingSoft</li>
<li>Security Awareness</li>
</ul>
</div>
<div class="col_1">
<h3>Organization</h3>
<ul>
<li>Organization Chart</li>
<li>*****</li>
</ul>
</div>
<div class="col_1">
<h3>Policies & Procedure</h3>
<ul>
<li>Policies</li>
<li>Mailbox Quota</li>
<li>Escalation</li>
<li>DRP</li>
</ul>
</div>
</div>
</li>
<li class="auto-style1">Welcome to IT Portal</li>
</ul>
</div>

Drop down menu not working in internet explorer

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I open this in internet explorer, then the hover dropdowns (the dropdowns that appear on hovering over the arrow signs) don't extend till the end, as a result when I try to move to those sub-menus, they disappear!!
Anyway to fix this? Or make this on-click instead of hover???

div property width not maximum/Collapse Expand

I have two questions please.
1 - I have div called id="rightcolumn" in the right side padding: 10px;
Inside the div id="rightcolumn" I have anther div called rightcolumn_s.
This div id = rightcolumn_s not open to max-width:100%;.why?
2 - In the div id="rightcolumn" I have Collapse/Expand this Collapse Expand have points.
The points are on the left side after the item_1,item_2,item_3. I need the points
Before the words item_1,item_2,item_3 in the right side.
Thanks for any help.....
The website
css code:
a { color:blue; }
#content { background-color:#dddddd; width:200px; margin-top:2px; }
html{
height:0px;
text-align: right;
width:1280;
height:1024px;
}
body {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_body.png');
background-repeat:repeat;
overflow:hidden;
font-family:Palatino Linotype;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height:600px;
}
.insidWindow {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_inside_window.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:52.5%;
}
h2 {
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom {
background: none repeat scroll 0 0 #880000;
line-height: 11px;
margin: 0;
position: relative;
top: -516px;
}
#leftcolumn_s {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#rightcolumn_s{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
max-width:100%;
margin: 0px;
padding: 10px;
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
}
#chatRead {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_dark.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 90px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#chatWrite {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 25px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#lineYelow{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 7px;
height:15%;
color: #745B1B;
font-family: 'CarterOneRegular';
font-size: 16px;
line-height: 34px;
margin: 0;
padding: 0;
text-shadow: 1px 1px 0 #FFF0D8;
width: auto;
}
#wrapMein{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_wrapMein.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
overflow:hidden;
margin: 0px 5px 20px 5px;
padding: 0px 0px 0px 0px;
position: relative;
height:540px;
}
.column {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 505px;
margin: 5px;
padding: 0 5px;
position: relative;
top: -15px;
width: 20%;
}
.rcolumn{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
color: red;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
.maintitle1 {
background: center top #2C6987 repeat-x scroll ;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
box-shadow: 0 1px 0 #528CBC inset;
color: #FFFFFF;
font-size: 16px;
font-weight: 300;
padding: 6px 10px 6px 10px;
}
#logo{
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
position:fixed;
top:34px;
left:0px;
height: 9.6%;
}
.resolution span {
color: #2B8E00;
display: block;
font-size: 55px;
text-transform: lowercase;
}
HTML code:
<body >
<img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide" />
<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id LineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%"="">this
div
classlineAzurespnbsp;| | | | | |</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">div id="rightcolumn"
<div class="floatRight"><H3 class="maintitle1">articals</H3></div>
<ul>
<li>
Item 1
<ul id="node1" style="display:none">
<li>Sub-item 1</li>
<li>
Sub-item 2
<ul id="node2" style="display:none">
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>
Item 2
<ul id="node3" style="display:none">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">insidWindow
<div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; ">
Resize me<br>
Please try to resizeme:<br> www www www.
<div class="resolution">
You are using
<span id="resolutionNumber"></span>
</div>
</div>
</div><br>
</div><!--insidWindow-->
<div id="chatRead">here is div id = chatread</div>
<div id="chatWrite">here is div id = chatWrite</div>
<div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->
</body></html>

1) This div id = rightcolumn_s not open to max-width:100%;
In order for the max-width property to work, you also need to set width for the element.
max-width: 100%;
width: 100%;
2) I need the points Before the words item_1,item_2,item_3 in the right side.
Define float: right; to the ul and this will put the points on the right as well.
<ul style="float: right;">