Solved

Problem with sub-menu item

Posted on 2014-10-09
45
166 Views
Last Modified: 2014-10-25
Hi,
For instance, i expect to show each li item like the 1st two li items below

    <style type="text/css">
        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1;
          margin: 1;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

            #horizontalmenu li ul {
                display: none;
                position: absolute;
            }

            #horizontalmenu li:hover ul {
                display: block;
                background: #7C7A82;
                height: auto;
                width: 8em;
            }

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
            }

            body {
               padding-top: 100px;
               background-color: gray;
            }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
    </style> 

    <div id="horizontalmenu">
        <ul>
            <li>
                <a href="#">News</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_ite1.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_ite2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Sport</a></li>
                    <li><a href="#">Hollybood</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Technology</a>
                <ul>
                    <li><a href="#">IT/Software</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Sports</a>
                <ul>
                    <li><a href="#">Cricket</a></li>
                    <li><a href="#">Tenis</a></li>
                    <li><a href="#">Badminton</a></li>
                    <li><a href="#">Hockey</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Country</a>
                <ul>
                    <li><a href="#">India</a></li>
                    <li><a href="#">America</a></li>
                    <li><a href="#">France</a></li>
                    <li>
                        <a href="#">Pakistaan</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

Open in new window


to all the sub-menu items. How to adjust the css file?
0
Comment
Question by:HuaMinChen
  • 26
  • 18
45 Comments
 
LVL 1

Expert Comment

by:Prashant Jagdale
Comment Utility
Change the css class below as shown :
#horizontalmenu li ul li {
                clear: both;
                border-style: none;
                background-image: url(/styles/test.png);
 }

where background image will have your image path.
html code will be as below:
<div id="horizontalmenu">
        <ul>
            <li><a href="#">News</a>
                <ul>
                    <li><a href="#">
                        <label id="Label13" runat="server">
                            <b>????</b></label></a> </li>
                    <li><a href="#">
                        <label id="Label8" runat="server">
                            <b>????</b></label>
                    </a></li>
                    <li><a href="#">Sport</a></li>
                    <li><a href="#">Hollybood</a></li>
                </ul>
            </li>
            <li><a href="#">Technology</a>
                <ul>
                    <li><a href="#">IT/Software</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li>
                </ul>
            </li>
            <li><a href="#">Sports</a>
                <ul>
                    <li><a href="#">Cricket</a></li>
                    <li><a href="#">Tenis</a></li>
                    <li><a href="#">Badminton</a></li>
                    <li><a href="#">Hockey</a></li>
                </ul>
            </li>
            <li><a href="#">Country</a>
                <ul>
                    <li><a href="#">India</a></li>
                    <li><a href="#">America</a></li>
                    <li><a href="#">France</a></li>
                    <li><a href="#">Pakistaan</a> </li>
                </ul>
            </li>
        </ul>
    </div>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Sorry, I have different picture files to different sub-menu items, like
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_ite1.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_ite2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    ...

Open in new window

how to adjust the css file to have bigger area to each sub-menu item?
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
To show the relevant picture file on each sub-menu item.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Remove the width from this style
            #horizontalmenu li:hover ul {
                display: block;
                background: #7C7A82;
                height: auto;
                /*width: 8em;  REMOVE THIS STYLE */
            }

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Many thanks.
I do try to delete that option.

I do expect to something like
https://dl.dropboxusercontent.com/u/40211031/t831.png

and
https://dl.dropboxusercontent.com/u/40211031/t832.png

and there'll be different li lists being shown upon any hovering to the left-side TABs.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Can you show us a link or code of what you have so far?
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Sorry, I only expect to have the similar TABs, having specific li lists to each TAB, like the sample screenshots above.
The above screenshots are not those in my projects yet.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Is there something you still need done before you implement that look in your project or are you asking how to implement that look in your project?

Based on your original question I am not sure what it is you need from us?
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
I only expect to have the similar appearance, like what I currently showed above, to my project.

The current screenshots are not from my project and this is why I expect to see the sample like the above. Many thanks.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Ok then based on what has posted so far - what do you still need?
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Thanks a lot.

Any example codes to have the TABs like
https://dl.dropboxusercontent.com/u/40211031/t831.png

and
https://dl.dropboxusercontent.com/u/40211031/t832.png

of which each TAB is having detailed li items and each li item is having picture file there.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Here are the basics
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
ul.main {
  width: 200px;
}
ul.main > li {
  line-height: 20px;
  background: red;
  color: white;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}
a {
  color: white;
}
ul ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 600px;
  background: rgba(111,111,111,0.5);
  font-size: 0;
}
ul ul li {
  display: inline-block;
}
ul ul li img {
  width: 200px;
}
ul.main > li:hover ul {
  display: block;
}
</style>
</head>
<body>
<ul class="main">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
    </ul>
  </li>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
    </ul>
  </li>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Open in new window

Sample code here http://www.marcorpsa.com/ee/e021.html
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Many many thanks. Can we show the relevant sub-menu items in the same position, as now the 2nd TAB is having li items at vertically lower position than the list of 1st TAB?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Just move the position: relative from the <li> to the ul.main. Full listing below
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
ul.main {
  width: 200px;
  position: relative;
}
ul.main > li {
  line-height: 20px;
  background: red;
  color: white;
  box-sizing: border-box;
  padding: 10px;
}
a {
  color: white;
}
ul ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 600px;
  background: rgba(111,111,111,0.5);
  font-size: 0;
}
ul ul li {
  display: inline-block;
}
ul ul li img {
  width: 200px;
}
ul.main > li:hover ul {
  display: block;
}
</style>
</head>
<body>
<ul class="main">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
    </ul>
  </li>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
    </ul>
  </li>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
      <li><a href="#"><img src="test.jpg" /></a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Many many thanks Julian.
Here are the codes
    <style type="text/css">
        * {
          padding: 0;
          margin: 0;
        }
        ul {
          list-style: none;
        }
        ul.main {
          width: 200px;
        }
        ul.main > li {
          line-height: 20px;
          background: red;
          color: white;
          box-sizing: border-box;
          padding: 10px;
          position: relative;
        }
        a {
          color: white;
        }
        ul ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background: rgba(111,111,111,0.5);
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 200px;
        }
        ul.main > li:hover ul {
          display: block;
        }
        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1;
          margin: 1;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
            height: 170px;
            width: 170px;
        }

        body {
           padding-top: 100px;
           background-color: #4278A8;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
        display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
        width: 70%;
        }
        .dia {
        display:none;
        }
    </style> 
    ...
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item 1</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="tb_p1_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/>
                                <input type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span><%=lb_var1.Text %></span><br /--->
                                <input type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

Open in new window

I don't know why the TABs with sub-items do not appear like yours.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
How to adjust the current codes above to ensure that they're showing the same as your last example? Thanks a lot.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You seem to have applied the inline-block or float style to your main menu resulting in the menu items running left to right instead of vertically.

Also your main menu width seems to wide.

Your submenu width seems to be too narrow - or else you have not specified a style to put the menu items next to each other (inline-block or float: left)

I think what is happening is you are applying styles to your <ul> <li> items that is affecting both parent menu and sub-menu. Without seeing your code though difficult to diagnose the problem
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Yes, I did show the relevant codes above (through the reply 2 days). Many thanks and big appreciations to you!
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Do you see my codes above? Thanks.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
It is better now as I get these
https://dl.dropboxusercontent.com/u/40211031/t842.png
https://dl.dropboxusercontent.com/u/40211031/t843.png

using these codes
    <style type="text/css">
        * {
          padding: 0;
          margin: 0;
        }
        ul {
          list-style: none;
        }
        ul.main {
          width: 200px;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        a {
          color: white;
        }
        ul ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #465061;
          font-size: large;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
            height: 80px;
            width: 90px;
        }
        ul.main > li:hover ul {
          display: block;
        }
        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
        }
        #horizontalmenu li {
            padding-right: 100px;
            display: block;
            border: 2px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
            height: 170px;
            width: 170px;
        }

        body {
           padding-top: 100px;
           background-color: #4278A8;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 1px;
             padding: 1px;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         ...

    </style> 
    ...
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item 1</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

Open in new window

but how to align the whole menu to the middle of the page, as it is now aligned to the left on the page? And how to align better to all sub-menu items?
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Any other help?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
A good rule to follow is when things are not working as you expect them - validate your page. Often markup errors are to blame.
In this case there were a couple of things in your code that was causing problems

1. The closing </div> around the <label> was not a closing </div> it was an opening <div> - resulting in markup being mis-interpreted.

2. First <li> in first menu item had an extra <input> not present in the other <li> items - this was making the first <li> longer than the rest in the row resulting in a gap at the top of the row for items 2 and 3.

3. The width and height on your <li> were both less than the actual width and height - your <img> is set to width 200px on a container that is only 170px wide.

I took your menu markup and added it to my styling from my earlier post - see below for results
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
ul.main {
  width: 200px;
  position: relative;
}
ul.main > li {
  line-height: 20px;
  background: red;
  color: white;
  box-sizing: border-box;
  padding: 10px;
}
a {
  color: white;
}
ul ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 600px;
  background: rgba(111,111,111,0.5);
  font-size: 0;
}
ul ul li {
  display: inline-block;
}
ul ul li img {
  width: 200px;
}
ul.main > li:hover ul {
  display: block;
}
</style>
</head>
<body>
<div id="horizontalmenu">
	<ul class="main">
		<li> <!-- Item 1 -->
			<a href="#">Item 1</a>
			<ul>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" onclick="pict_click1();" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label13" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span><%=lb_var1.Text %></span><br /--->
							<input type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label8" runat="server"><b>1234</b></label>
							</div>
							<input type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" onclick="pict_click3();" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label4" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label5" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
			</ul>
		</li>
		<li> <!-- Item 2 -->
			<a href="#">Item</a>
			<ul>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label6" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label7" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label9" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label10" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
			</ul>
		</li>
		<li> <!-- Item 3 -->
			<a href="#">Item</a>
			<ul>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label11" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label12" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label14" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label15" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
			</ul>
		</li>
		<li> <!-- Item 4 -->
			<a href="#">Item</a>
			<ul>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label16" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label17" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label18" runat="server"><b>????</b></label>
							</div>
							<input type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
				<li><a href="#">
					<div class="imagesList-item-frame shadow">
						<img src="test.jpg" />
						<div class="legend">
							<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
								<label id="Label19" runat="server"><b>abcde</b></label>
							</	div>
							<input type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
							<!---span>Some descriptions here</span><br /--->
							<input type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
						</div>
					</div>
				</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Many thanks Julian.
I've tried your codes and have got this
https://dl.dropboxusercontent.com/u/40211031/t844.png

the point is, the sub-menu items highlighted above in green are not aligned well and I expect them to be like
https://dl.dropboxusercontent.com/u/40211031/t831.png

what to adjust and I do not expect the several TABs to be in the middle of the page.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
And can you please note that I have "horizontalmenu" part in the css, which is also affecting the appearance of that? Thanks a lot.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
@HuaMinChen - I know exactly what you are trying to achieve - my last post does exactly that.
You need to work from my post and try and integrate to what you are doing - here is what it looks like on my side
ScreenshotPosting screen shots of what you are getting is not useful because without the code that created the image it is difficult to determine the cause.
The code that I have posted works as expected - you need to go back to that code.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Sorry, I have some other css codes there, like

        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu li {
            position: relative;
            padding-right: 100px;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
            height: 170px;
            width: 170px;
        }
        ...

Open in new window

which can be affecting the appearance of that. how to adjust such css codes above?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Yup - those are causing the problem and they are not in my post - you don't need them.

Comment them out for now.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
If I remove that part of css, i then get this
https://dl.dropboxusercontent.com/u/40211031/t845.png
using these codes
    <style type="text/css">
        * {
          padding: 0;
          margin: 0;
        }
        ul {
          list-style: none;
        }
        ul.main {
          width: 160px;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        a {
          color: white;
        }
        ul ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #465061;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }
        ul.main > li:hover ul {
          display: block;
        }

        body {
           padding-top: 100px;
           background-color: #4278A8;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
    </style> 
    ...
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item 1</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="tb_p1_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/>
                                <input type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span><%=lb_var1.Text %></span><br /--->
                                <input type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>????</b></label>
                                <div>
                                <input type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="????" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Here are some of the issues

1. You have not fixed the closing div issue I mentioned in my earlier post

2. You have placed the css from post at the start of your stylesheet - this means that styles further on in your stylesheet are going to overwrite those. Rather place the styles at the end of the stylesheet

3. You have three lines of styles in the middle of your stylesheet
ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
ul li { display: inline-block;  }
ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

Open in new window

This is affecting the menu.

If you need these styles for other elements on your page then give those elements a class or enclose them in a container with a class or id that you can then use to isolate them so they don't affect other elements on your page.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Sorry, I did remove these

        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

Open in new window

but using these codes

    <style type="text/css">
        body {
           padding-top: 100px;
           background-color: #4278A8;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu li {
            position: relative;
            padding-right: 100px;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
            height: 170px;
            width: 170px;
        }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
            display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
            width: 70%;
        }
        .dia {
            display:none;
        }

        * {
          padding: 0;
          margin: 0;
        }
        ul {
          list-style: none;
        }
        ul.main {
          width: 160px;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        a {
          color: white;
        }
        ul ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #465061;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }
        ul.main > li:hover ul {
          display: block;
        }

    </style> 
    ...

    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item 1</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="tb_p1_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/>
                                <input type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span><%=lb_var1.Text %></span><br /--->
                                <input type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>照片描述</b></label>
                                <div>
                                <input type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    ...

Open in new window

I still get this

https://dl.dropboxusercontent.com/u/40211031/t846.png

and very sorry for that I don't know where to adjust div problem as you mentioned it.
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
Ok lets take this one step at a time

1. You have not corrected the html errors I pointed out above
<div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
    <label id="Label13" runat="server"><b>照片描述</b></label>
<div> <!-- <<===== THIS IS A PROBLEM SHOULD BE </div> --.

Open in new window

You need to fix all your <label> elements

2. A little primer in styles. If you create a style
#horizontalmenu li {
    ...
    display: block;
    ...
}

Open in new window

This is going to persist through all <ul> child elements of #horizontalmenu until you expressly override it. In other words unless you either remove the above style OR do something like this
ul {
  display: inline-block; 
}

Open in new window

The previous still will persist. I am not saying this is how you fix it - just to illustrate the problem. The display: block style is carrying from the #horiztontalmenu style

The question is why are you mixing the styles I gave you and the #horizontalmenu styles? These should be merged into one.

Also take time to learn about the '>' operator in style sheets. Consider the following style
ul.main li {
   width: 100p;x
}

Open in new window


This style will apply to all <li> elements that are children and grandchildren and great-grandchildren etc of ul.main. Sometimes we only want to style the immediate children i.e.
<ul>
     <li>   <!-- <<=== We want to style this -->
         <ul>
               <li> <!-- <<=== But not this -->

Open in new window


The '>' operator allows us to do this

ul.main > li {

Open in new window

means only style the immediate children - not grandchildren etc.

Here is some modified code for you to work with.
<!doctype html>
<html>
<head>
    <style type="text/css">
        body {
           padding-top: 100px;
           background-color: #4278A8;
        }
        * {
          padding: 0;
          margin: 0;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
            display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
            width: 70%;
        }
        .dia {
            display:none;
        }

        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 170px;
        }
        ul.main {
          width: 160px;
		  position: relative;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        ul.main > li:hover ul {
          display: block;
        }
        a {
          color: white;
        }
        ul.main ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #465061;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }

    </style> 
</head>
<body>
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item 1</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span><%=lb_var1.Text %></span><br /--->
                                <input type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Open in new window

Please read above carefully and apply as directed - start with fixing your markup.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Many many thanks Julian.
I get this
https://dl.dropboxusercontent.com/u/40211031/t848.png

now. I have 2 things. How to furhter have one div and then align the main TABs to the left as they are now in the middle of the page? And how to ensure the sub-items of 1st TAB are defaulted to be shown, as now sub-items are only shown when mouse is hovering on top of TAB?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Please post code - cannot tell from the image.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
I am using the same codes which you showed to me yesterday. Now I have 2 questions. How to further have one div and then align the main TABs to the left as they are now in the middle of the page? And how to ensure the sub-items of 1st TAB are defaulted to be shown, as now sub-items are only shown when mouse is hovering on top of TAB? Big appreciations.
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
To fix the horizontal layout of your images take a look at these styles
#horizontalmenu li ul li {
    clear: both;
    border-style: none;
    width: 170px;
}
...
ul ul li img {
    width: 140px;
}

Open in new window

You are setting the width of the image less than the width of the container - so you need to make the width of the image 100% so it fills its container.

To make the first item sticky change

ul.main > li:hover ul {
  display: block;
}

Open in new window

Into
ul.main li:first-child ul, 
ul.main > li:hover ul {
  display: block !important;
  z-index: 100;
}
ul.main li:first-child ul {
	z-index: 10;
}

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Many many thanks Julian. You're very very helpful regarding css issues!

Only to 1st request, as now the 4 main TABs (Those called "Item") are position in the middle of the page, right? I expect to adjust their positions to the left. That's it all I need!
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
I am assuming you want this

#horizontalmenu {
/*   text-align: center;  REMOVE THIS STYLE*/
}

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Many many thanks Julian.
Now they're align to the left-most position like
https://dl.dropboxusercontent.com/u/40211031/t849.png

I want to move all main TABs with their sub-menuitems a little bit to the right. how?
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
Try giving the elements you want to move right a margin-left
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Julian,
I still one small request. I expect that the sub-menu items of the relevant main TAB are still being shown there, once the hovering mouse has left that main TAB, as now the sub-menu items of 1st main TAB are always being shown, after I've hovered to leave other main TAB. Many thanks to big help all the times!
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
That will require javascript to do that

What you need to do is give your first element a style of selected
<li class="selected">
...

Then remove this
ul.main > li:hover ul {
    display: block;
}

Open in new window

And add this
ul.main li.selected ul{
   display: block;
}

Open in new window

Then add this javascript (I am using jquery)
<script src="http://code.jquery.com/jquery.js">
<script type="text/javascript">
$(function() {
   $('ul.main li').hover(function() {
       if (!$(this).hasClass('selected')) {
           $('ul.main li.selected').removeClass('selected');
           $(this).addClass('selected');
       }
   });
});
</script>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Big appreciation again!
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome - good luck with your project.
0
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Can you please help to this

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28544457.html

if available? Many thanks and have a great weekend!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now