Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="menu_wrapper">
    <ul class="menu_list clearfix">
      <li>
        <img src="http://turum.net/i/flag/RU.png">Крым
        <ul class="submenu_list">
          <li><a href="" target="_blank">Алушта</a></li>
          <li><a href="" target="_blank">Севастополь</a></li>
          <li><a href="" target="_blank">Ялта</a></li>
          <li><a href="" target="_blank">Алушта</a></li>
          <li><a href="" target="_blank">Севастополь</a></li>
          <li><a href="" target="_blank">Ялта</a></li>  
          <li><a href="" target="_blank">Алушта</a></li>
          <li><a href="" target="_blank">Севастополь</a></li>
          <li><a href="" target="_blank">Ялта</a></li>
          <li><a href="" target="_blank">Алушта</a></li>
          <li><a href="" target="_blank">Севастополь</a></li>
          <li><a href="" target="_blank">Ялта</a></li>  
        </ul>
      </li>
      <li>
        <img src="http://turum.net/i/flag/RU.png">Краснодарский край
        
        <ul class="submenu_list">
          <li><a href="" target="_blank">Сочи</a></li>
          <li><a href="" target="_blank">Анапа</a></li>
          <li><a href="" target="_blank">Адлер</a></li>
          <li><a href="" target="_blank">Геленджик</a></li>
          <li><a href="" target="_blank">Лоо</a></li>
        </ul>
        
      </li>
      <li>
        <img src="http://turum.net/i/flag/AB.png">Абхазия
         <ul class="submenu_list">
          <li><a href="" target="_blank">Цандрипш</a></li>
          <li><a href="" target="_blank">Гагра</a></li>
        </ul>
      </li>
    </ul> 
  </div>
</body>
</html>
 
* {
  box-sizing: border-box;
}
​
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
​
body {
  background-color: #ccc;
  padding: 30px;
  font-family: Arial;
}
​
.menu_wrapper {
  position: relative;
  background-color: #eee;
  width: 90%;
  max-width:800px;
  box-shadow:0px 0px 10px #666;
}
​
.menu_wrapper ul.menu_list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #006699;
  ~width: 40%;
}
​
.menu_wrapper ul.menu_list > li {
  padding: 6px 0 9px 0;
  border-bottom: 1px solid #ddd;
}
​
.menu_wrapper ul.menu_list li:hover {
  background-color: #ddd;
  color: brown;
  cursor: default;
  
}
​
.menu_wrapper ul.menu_list li:hover .submenu_list {
  ~display: block;
  display: table;
}
​
.menu_wrapper img {
  margin-right: 7px;
  margin-left: 10px;
  vertical-align: bottom;
}
​
.submenu_list {
  list-style: none;
  display:none;
  margin: 0;
  margin-top:-6px;
  padding: 10px 0;
  float:right;
  width: 60%;
  background-color: #ddd;
}
​
.submenu_list a {
  color: brown;
  text-decoration: none;
}
​
​
.submenu_list li {
  padding: 6px 0 6px 15px;
}
​
.submenu_list li:hover a {
  color: black;
  text-decoration: underline; 
}
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers