I want the list of dropdown to have more width because I want the string"IT Hardware" inline. But my li's width are not extend.
So the string"IT Hardware go to new line" I need it just one line per li
In addition, I try to display:block; and margin:auto text to horizontal center but it's not success.
EDIT: Sorry my mistake to center horizontal text,just use text-align:center;

```js
$(document).ready(function(){
  $("#nav ol li").hover(function(){
    $(this).find("ol").show();   //when onmouseover  //ol ใน nav ol li อีกชั้นนึง
  },
  function(){  //when mouseout
    $(this).find("ol").hide();
  });
});
```

```css
html,body{margin:0px;padding:0px;}
body{background:#cceeff;font-family:"verdana"; }
#wrapper{margin:auto;padding:0px;width:75%;}
#header{margin:0px;padding:0px;width:100%;height:18vh;float:left;
 background: #99d6ff;
 background-image: url("http://co.lnwfile.com/_/co/_raw/0a/el/r0.jpg"); /* fallback */
 background-image: url("http://co.lnwfile.com/_/co/_raw/0a/el/r0.jpg"), linear-gradient(#99d6ff, #006bb3); /* W3C */

 background-blend-mode: multiply;
 /*background-position: 10% 50%; มีsize 100% so this will not work*/
 background-size: 100%;
 background-repeat: no-repeat;
}
#header h1{margin:0px;padding:0px;/*border-bottom:1px solid #eee;*/font-size:20px;padding-bottom:10px;}
#nav{margin:0px;padding:0px;width:100%;float:left;
 background: #80ffe5; /* For browsers that do not support gradients */
 background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol{list-style:none;margin:0px;padding:0px;}
#nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
#nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}

#nav ol li:hover{background:lightgreen;
 -webkit-transition: background-color 0.5s ease-out;
 -moz-transition: background-color 0.5s ease-out;
 -o-transition: background-color 0.5s ease-out;
 transition: background-color 0.5s ease-out;
}
#nav ol li ol li:hover{background:lightgreen;
 -webkit-transition: background-color 0.5s ease-out;
 -moz-transition: background-color 0.5s ease-out;
 -o-transition: background-color 0.5s ease-out;
 transition: background-color 0.5s ease-out;
}
#nav ol ol{position:absolute;top:35px;left:0px;display:none;z-index: 1;
 background: #80ffe5; /* For browsers that do not support gradients */
 background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol ol li{border-bottom:solid 1px lightgrey;width:100%;} 
```

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
</head>

<body>

<div id="wrapper">
<div id="header">
          <h1>
    <p></p>
  </h1>
</div>
<div id="nav">
 <ol>
        <li><a href="<?php echo base_url();?>index.php/home">Home</a></li>
        <li> <a href="#"> Product </a>
            <ol>
                <li><a href="#">IT Hardware</a></li>
                <li><a href="#">xxxxx</a></li>
                <li style="border:none;"><a href="#">xxxxxx</a></li>
            </ol>
                </li>
        <li><a href="#">Contact us</a></li>
 </ol>
</div>
</div>
</body>
</html>
```