display dropdown list items in next column

Question

when i tried below snippet , when i used lot of options in dropdown, its growing long in one column , once i mouse-over 1st row 2nd column image, all dropdown options will display in one column.....

but i wanted to display in next column something like below image :

#narrow-by-list { display :none;}
.choose1 
{ 
text-transform: capitalize; 
text-align: center;
font-weight:bold;
font-size:18px;
color: #000000;
}
.links1234 { color : #908983;}
.links1234:hover { color : #f85700;}


.grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  width: 23%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  background-color : #fff;
  
}
.grow:hover ul{
  display: block;
}

.grow ul {
  margin: 0;
  padding: 5px;
  list-style: none;
  display: none;
  position: absolute;
  z-index: 1;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(0,0,0,.25);
  left: 0;
  right: 0;
}

.grow img{
  width: 100%;
}

.expand 
{
 position:relative;
 right:8px;
 top:4px;
}

<h2 class ="choose1">
  Choose Your Brand
</h2>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
 <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/blackberry.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/blackberry_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/blackberry.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

after 7 values [drop-down values] 8th value should start from 2nd column.

It's difficult to tell what you're asking. Are you looking to replace just one image with one of the drop down options? Or, are you looking to have the images expand over each other, like this https://jsfiddle.net/zok2tgfp/ — Chris J, Sep 27 '16 at 07:57
@ChrisJ no, when we mouse-over on image which have lot of dropdown options , than i want to display those dropdown opttions in 2 columns..... as it not looks good if dropdown options become more...... — , Sep 27 '16 at 07:58
I think this is not possible, you can't divide a dropdownlist in 2 parts, a option would be to make 2 (or more) dropdownlists, and you make them per category, like one for all Apple phones that contains the part "S", or all Samsung phones with parts like "Galaxy". — Max, Sep 27 '16 at 09:20
@M.Arendsen is there any option that we can restrict some items in one column and others in another colum using some css code ? — , Sep 27 '16 at 09:22
No, you need to do it manually or have some kind of code like PHP or Javascript. — Max, Sep 27 '16 at 09:25
is it possible to use differnt
tags and adjust one
tag through css , is that right approach ? — , Sep 27 '16 at 10:13

score 1 · Accepted Answer · answered Sep 27 '16 at 10:35

You Can Do this with using :before

#narrow-by-list { display :none;}
.choose1 
{ 
text-transform: capitalize; 
text-align: center;
font-weight:bold;
font-size:18px;
color: #000000;
}
.links1234 { color : #908983;}
.links1234:hover { color : #f85700;}


.grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  width: 23%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  background-color : #fff;
  
}
.grow:hover ul{
  display: block;
}

.grow ul {
  margin: 0;
  padding: 5px;
  list-style: none;
  display: none;
  position: absolute;
  z-index: 1;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(0,0,0,.25);
  left: 0;
  right: 0;
}

.grow img{
  width: 100%;
}

.expand 
{
 position:relative;
 right:8px;
 top:4px;
}


.grow li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.grow li:before {
    padding: 5px;
    margin-right: 5px;
    color: orange;
    background-color: white;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class ="choose1">
  Choose Your Brand
</h2>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
 <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/blackberry.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/blackberry_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/blackberry.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

now its divding options from `one-column` to `2-column` for all the images..... but i wanted to display in 2 columns only if image have more than 7 dropdown values, 8th one should display in 2nd column..... — , Sep 27 '16 at 10:38
its my mistake that i didt informed that it should applicable only for some images, sorry for that, you can check [link](http://sbdev2.kidsdial.com:81/cases-covers.html) here.... — , Sep 27 '16 at 10:39
if you check this [link](http://sbdev2.kidsdial.com:81/cases-covers.html) we have 4 images per row, if you mouse-over on 1st image , four values [drp-down options] are displaying in 2 columns, but here only 1 column is enough. if you mouse-over on 2nd image, you can see lot of values, here in one column only 7 values should display , 8th column should start in 2nd column. — , Sep 27 '16 at 10:44
also instead of using `js` if at all possible if you help with css, that will be really much helpfull as my manager said to avoid js.... — , Sep 27 '16 at 10:47
can we do something like this : http://stackoverflow.com/questions/6207957/make-css-drop-down-menu-2-columns ? — , Sep 27 '16 at 11:28
but the problem is if we use more values like 40 and 50 we may need to use 3 or 4 columns for all images [ even for images which have only 4 or 5 values ] — , Sep 27 '16 at 11:35
Thanks a lot for your time, this worked for me : http://stackoverflow.com/questions/12332528/how-to-display-list-items-as-columns — , Sep 28 '16 at 04:50

display dropdown list items in next column

1 Answers1

Linked