Problem with sub-menu item
Hi,
For instance, i expect to show each li item like the 1st two li items below
to all the sub-menu items. How to adjust the css file?
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>to all the sub-menu items. How to adjust the css file?
ASKER
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>
...ASKER
To show the relevant picture file on each sub-menu item.
Remove the width from this style
#horizontalmenu li:hover ul {
display: block;
background: #7C7A82;
height: auto;
/*width: 8em; REMOVE THIS STYLE */
}ASKER
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.
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.
Can you show us a link or code of what you have so far?
ASKER
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.
The above screenshots are not those in my projects yet.
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?
Based on your original question I am not sure what it is you need from us?
ASKER
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.
The current screenshots are not from my project and this is why I expect to see the sample like the above. Many thanks.
Ok then based on what has posted so far - what do you still need?
ASKER
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.
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.
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>ASKER
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?
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>ASKER
Many many thanks Julian.
Here are the codes
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>ASKER
How to adjust the current codes above to ensure that they're showing the same as your last example? Thanks a lot.
ASKER
Hi Julian,
I want to show the menu item/sub-item like
https://dl.dropboxusercontent.com/u/40211031/t831.png
https://dl.dropboxusercontent.com/u/40211031/t832.png
but now it is like
https://dl.dropboxusercontent.com/u/40211031/t840.png
https://dl.dropboxusercontent.com/u/40211031/t841.png
what to adjust?
I want to show the menu item/sub-item like
https://dl.dropboxusercontent.com/u/40211031/t831.png
https://dl.dropboxusercontent.com/u/40211031/t832.png
but now it is like
https://dl.dropboxusercontent.com/u/40211031/t840.png
https://dl.dropboxusercontent.com/u/40211031/t841.png
what to adjust?
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
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
ASKER
Yes, I did show the relevant codes above (through the reply 2 days). Many thanks and big appreciations to you!
ASKER
Do you see my codes above? Thanks.
ASKER
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
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>ASKER
Any other help?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
And can you please note that I have "horizontalmenu" part in the css, which is also affecting the appearance of that? Thanks a lot.
@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
Posting 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.
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
Posting 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.
ASKER
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;
}
...
Yup - those are causing the problem and they are not in my post - you don't need them.
Comment them out for now.
Comment them out for now.
ASKER
If I remove that part of css, i then get this
https://dl.dropboxusercontent.com/u/40211031/t845.png
using these codes
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>
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
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.
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; }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.
ASKER
Sorry, I did remove these
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.
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; } <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>
...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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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?
Please post code - cannot tell from the image.
ASKER
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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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!
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
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;
}ul.main li.selected ul{
display: block;
}<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>ASKER
Big appreciation again!
You are welcome - good luck with your project.
ASKER
Can you please help to this
https://www.experts-exchange.com/questions/28544457/Ensure-the-div-is-centered.html
if available? Many thanks and have a great weekend!
https://www.experts-exchange.com/questions/28544457/Ensure-the-div-is-centered.html
if available? Many thanks and have a great weekend!
#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:
Open in new window