Link to home
Start Free TrialLog in
Avatar of Peter Chan
Peter ChanFlag for Hong Kong

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
        .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>

Open in new window

Here is live url
http://my-friend.co/Main/Default.aspx
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Peter Chan

ASKER

Sorry, by the same css part, like
        .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 {
            position: absolute;
            visibility: hidden;
            margin-top: -10px;
            width: 120px;
            margin-left: 10px;
        }

        .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;
          }

Open in new window

how to add sub-options to these few TABs?

        <div >
            <ul class="tab">
                <li class="dropdown" google-data-stat="PC端_index_Home">
                    <a href="http://my-friend.co/login5/Default.aspx" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;"><span>&nbsp;&nbsp;新楼盘&nbsp;&nbsp;</span></a>
                </li>
                <li class="list " google-data-stat="PC端_index_Rent">
                    <a href="http://my-friend.co/login5/Default.aspx" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;"><span>&nbsp;&nbsp;租盘&nbsp;&nbsp;</span></a>
                </li>
                <li class="saleList " google-data-stat="PC端_index_Sale">
                    <a href="http://my-friend.co/login5/Default.aspx" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;"><span>&nbsp;&nbsp;卖盘&nbsp;&nbsp;</span></a>
                </li>
                <li class="saleList" style="position:relative;" google-data-stat="PC端_index_Estate">
                    <a href="http://my-friend.co/login5/Default.aspx" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;"><span>&nbsp;&nbsp;我的清单&nbsp;&nbsp;</span></a>
                </li>
            </ul>
        </div>

Open in new window

why don't you choose à jQuery plugin to do that for you?
there's a tons
Hi,
Is there an example to that?
just Google for "jquery horizontal menu"
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?

<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;
		}
}

Open in new window


Here is the url
http://my-friend.co/Main/Default.aspx
could you create a new question for that? thanks.