Peter Chan
asked on
Re-position sub-options beneath the TAB
Hi,
How to re-position all sub-options (high-lighted in Green below) beneath the relevant TAB?
https://1drv.ms/i/s!Ai8CrEskdewXkyNMD8Y3_cBOzohg
by these codes
http://my-friend.co/Main/Default.aspx
How to re-position all sub-options (high-lighted in Green below) beneath the relevant TAB?
https://1drv.ms/i/s!Ai8CrEskdewXkyNMD8Y3_cBOzohg
by these codes
.body {
background-color:#1BA8E0;
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.lb_bck{
color: black;
top: 30px;
left: 1075px;
width: 36px;
height: 30px;
font-size: large;
font-weight: bold;
text-decoration: none;
}
.lb_bck:hover, .lb_reg:hover{
background-color: black !important;
color: white !important;
}
.lb_reg{
color: black;
top: 30px;
left: 1185px;
width: 36px;
height: 30px;
font-size:large;
font-weight: bold;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}
.left {
position:absolute;
left:10px;
border:Groove 1px #ccc;
width:55px;
right:10px;
}
.right {
position:absolute;
left:330px;
border:none 1px #c00;
width:61%;
}
.up {
top: 20px;
}
#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: 250px;
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;
-moz-border-radius: 7px;
border-radius: 7px;
border:solid 1px gray;
padding:7px;
}
ul.imagesList li img {
width: 99%;
height: 125px;
}
ul.imagesList li .legend {
width: 100%;
margin: 2px 2px 2px 2px;
}
ul.imagesList li:hover input {
display: block !important;
margin: 1px 1px 1px 1px;
}
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
.dia {
display:none;
}
input[type="text"], input.user-text
{
-moz-border-radius: 7px;
border-radius: 7px;
border:solid 1px gray;
padding:7px;
}
input[type="textbox"]
{
-moz-border-radius: 7px;
border-radius: 7px;
border:solid 1px gray;
padding:7px;
}
input[type="button"], button
{
-moz-border-radius: 7px;
border-radius: 7px;
border:solid 1px gray;
padding:7px;
}
input[type="password"]
{
-moz-border-radius: 7px;
border-radius: 7px;
border:solid 1px gray;
padding:7px;
}
.forbutton
{
-moz-border-radius: 8px;
border-radius: 10px;
border:solid 1px gray;
padding:7px;
}
select
{
-moz-border-radius: 7px;
border-radius: 7px;
border:solid 1px gray;
padding:7px;
}
...
<div>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li>
<a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">aaaaaaa</a></li>
<li><a href="#">bbbbbbbbb/a></li>
<li><a href="#">cccccccc</a></li>
<li class="divider"></li>
<li><a href="#">ddddddddddddd</a></li>
<li><a href="#">eeeeeeeeeeeeee</a></li>
</ul>
</li>
<li><a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">fffffffff</a></li>
<li><a href="#">gggggggggg</a></li>
<li><a href="#">hhhhhhhhh</a></li>
</ul>
</li>
<li><a href="#">hhhhhhhh</a></li>
<li class="divider"></li>
<li><a href="#">eeeeeeeeeee</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
</ul>
</div>
Here is live urlhttp://my-friend.co/Main/Default.aspx
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
why don't you choose à jQuery plugin to do that for you?
there's a tons
there's a tons
ASKER
Hi,
Is there an example to that?
Is there an example to that?
just Google for "jquery horizontal menu"
ASKER
Hi,
Many thanks. One last thing is, I expect the picture file to be shown as the background of the header, TABs (picture file would be right shown behind them). How to adjust the following?
Here is the url
http://my-friend.co/Main/Default.aspx
Many thanks. One last thing is, I expect the picture file to be shown as the background of the header, TABs (picture file would be right shown behind them). How to adjust the following?
<body>
<form id="main_form" runat="server">
<div class="content" id="wrapper" >
<asp:Image ID="img1" ImageUrl="~/../pict/ID-10028343.jpg" CssClass="background" Height="780px" Width="1220px" runat="server"/>
</div>
<div class="container">
<!-- freshdesignweb top bar -->
<div class="freshdesignweb-top">
<a href="http://my-friend.co/login5/Default.aspx" target="_blank">主页</a>
<span class="right">
<a href="http://my-friend.co/login5/Default.aspx/drop-down-responsive-menu-with-css3-and-jquery.html">
<strong>登入</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ freshdesignweb top bar -->
<header>
<h1><span>寻找而拥有</span>一个属于自己的天地</h1>
</header>
<!-- start header here-->
<header>
<div id="fdw">
<!--nav-->
<nav>
<ul>
<li class="current"><a href="http://my-friend.co/login5/Default.aspx">新楼盘<span class="arrow"></span></a>
<ul style="display: none;" class="sub_menu">
<li class="arrow_top"></li>
<li><a class="subCurrent" href="http://my-friend.co/login5/Default.aspx">Home Service</a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Home Responsive</a></li>
</ul>
</li>
<li><a href="http://my-friend.co/login5/Default.aspx">about</a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">services</a></li>
<li>
<a href="http://my-friend.co/login5/Default.aspx">租盘<span class="arrow"></span></a>
<ul style="display: none;" class="sub_menu">
<li class="arrow_top"></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio 3 </a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio 4 </a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio Single</a></li>
<li><a href="http://my-friend.co/login5/Default.aspx">Portfolio Two</a></li>
</ul>
</li>
...
.content {
position: relative;
width: 1220px;
height: 780px;
color: #fff; /* Text color for content div. */
}
#wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
.lb_bck{
color: black;
top: 30px;
left: 1075px;
width: 36px;
height: 30px;
font-size: large;
font-weight: bold;
text-decoration: none;
}
.lb_bck:hover, .lb_reg:hover{
background-color: black !important;
color: white !important;
}
.lb_reg{
color: black;
top: 30px;
left: 1185px;
width: 36px;
height: 30px;
font-size:large;
font-weight: bold;
text-decoration: none;
}
/* Slider
http://www.freshdesignweb.com/drop-down-responsive-menu-with-css3-and-jquery.html
*/
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700|Yanone+Kaffeesatz);
/*===== nav style ======*/
#fdw nav select {
display:none; /* this is just for the mobile display */
}
#fdw nav ul {
display:block;
z-index:999999;
}
#fdw nav ul li {
display:inline-block;
padding:50px 3px 30px;
margin-left:30px;
position:relative;
}
#fdw nav ul li a:link, #fdw nav ul li a:visited {
color:#444;
font:normal 20px 'Yanone Kaffeesatz', sans-serif;
text-transform:uppercase;
display:inline-block;
position:relative;
}
#fdw nav ul li a:hover, #fdw nav ul li a:active {
color:#e25d29;
text-decoration:none;
}
#fdw nav ul li span {
position:absolute;
right:-12px;
bottom:6px;
width:7px;
height:8px;
margin:0 0 0 3px;
float:right;
display:block;
background:url('images/nav_arrow.png') no-repeat left -8px;
font:0/0 a;
}
#fdw nav ul li.current {
border-bottom:2px solid #e25d29;
}
#fdw nav ul li.current a {
color:#e25d29;
cursor: default;
}
#fdw nav ul li.current a span {
background:url('../images/nav_arrow.png') no-repeat left 0;
}
#fdw nav ul li.current ul li a {
cursor:pointer;
}
/*===== sub_menu Style =======*/
#fdw nav ul li ul.sub_menu {
position:absolute;
top:90px;
left:0;
margin:0;
padding:0;
background:#fff;
border:1px solid #ececec;
border-top:5px solid #e25d29;
display:none;
z-index:999999;
-moz-box-shadow: 0px 6px 7px #121012;
-webkit-box-shadow: 0px 6px 7px #121012;
box-shadow: 0px 6px 7px #121012;
}
#fdw nav ul li ul.sub_menu li.arrow_top {
position:absolute;
top:-12px;
left:12px;
width:13px;
height:8px;
display:block;
border:none;
background:url('images/arrow_top.png') no-repeat left top;
}
#fdw nav ul li ul.sub_menu li {
float:none;
margin:0;
padding:0;
border-bottom:1px solid #ececec;
}
#fdw nav ul li ul.sub_menu li a {
white-space: nowrap;
width: 150px;
padding:12px;
font:13px Arial, tahoma, sans-serif;
text-transform:capitalize;
color:#777;
}
#fdw nav ul li ul.sub_menu li a:hover {
background:#f9f9f9;
color:#333;
}
#fdw nav ul li ul.sub_menu li a.subCurrent {
color:#e25d29;
cursor:default;
}
#fdw nav ul li ul.sub_menu li a.subCurrent:hover {
background:none;
}
/*===================== end Header style ======================*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* nav */
#fdw nav ul li{
margin-left:12px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
/* nav menu ul & select */
#fdw nav ul {
display:none;
}
#fdw nav select {
width:100%;
display:block;
margin-bottom:30px;
cursor:pointer;
padding:6px;
background:#f9f9f9;
border:1px solid #e3e3e3;
color:#777;
}
}
Here is the url
http://my-friend.co/Main/Default.aspx
could you create a new question for that? thanks.
ASKER
Open in new window
how to add sub-options to these few TABs?Open in new window