Solved

Re-position sub-options beneath the TAB

Posted on 2016-11-24
7
37 Views
Last Modified: 2016-11-27
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
0
Comment
Question by:HuaMinChen
  • 4
  • 3
7 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41901042
line 151 replace :
        .dropdown-menu .sub-menu {
            left: 100%;
            position: absolute;
            top: 0;
            visibility: hidden;
            margin-top: -1px;
        }

Open in new window

by :
.dropdown-menu .sub-menu {
    position: absolute;
    visibility: hidden;
    margin-top: -10px;
    width: 120px;
    margin-left: 10px;
}

Open in new window

scr1scr2
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41901159
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

0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901325
why don't you choose à jQuery plugin to do that for you?
there's a tons
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 10

Author Comment

by:HuaMinChen
ID: 41901338
Hi,
Is there an example to that?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901343
just Google for "jquery horizontal menu"
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41902156
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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41902244
could you create a new question for that? thanks.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

When we want to run, execute or repeat a statement multiple times, a loop is necessary. This article covers the two types of loops in Python: the while loop and the for loop.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to use the return statement in functions in C++. The video will also teach the user how to pass data to a function and have the function return data back for further processing.
The viewer will be introduced to the member functions push_back and pop_back of the vector class. The video will teach the difference between the two as well as how to use each one along with its functionality.

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

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

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now