html - CSS Menu sideways or Horizontal Dropdown -

html - CSS Menu sideways or Horizontal Dropdown -

i creating menu in css, when hover on languages, open sideways instead of downwards.

right doing:

languages en sp fr

i do:

languages en sp fr

here css deck example of below:

class="snippet-code-css lang-css prettyprint-override">ul.countries { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } ul li:hover { background: #555; color: #fff; } ul li ul { padding: 0; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul li ul li { background: #555; display: inline; color: #fff; text-shadow: 0 -1px 0 #000; } ul li ul li:hover { background: #666; } ul li:hover ul { display: inline; opacity: 1; visibility: visible; } class="snippet-code-html lang-html prettyprint-override"><ul class="countries"> <li> languages <ul> <li>en</li> <li>sp</li> <li>fr</li> </ul> </li> </ul>

you should alter display:block; display:inline , delete position absolute in ul li ul

ul li ul li { .... display: inline; /* changed display:block inline

html css