我怎么能带底栏菜单在侧边栏 [英] how can i bring bottom menu in sidebar

查看：102
本文介绍了我怎么能带底栏菜单在侧边栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我面对底部菜单栏的问题。我想在底部菜单栏中没有。

I am facing problem with bottom menu bar. I want nothing in the bottom menu bar. All the content and functionality which is same horizontally, I want to place vertically on the left side in a green space.

我的HTML文件：我的HTML文件

My HTML file:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Welcome to Cctvcart store</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="header_wrap">
        <div class="header_top_wrap">
            <div class="header_top">
            </div>
        </div>
        <!--end of header top wrap -->
        <div class="header_bottom_wrap">
            <div class="header_bottom">
                <ul class="bottom_menu">

                    <li class="dropdown"><a href="#">Company</a>
                        <ul class="submenu">
                            <li><a href="#">About Cctvcart</a></li>
                            <li><a href="#">New Releases</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </li>

                    <li class="dropdown"><a  href="#">Products</a>
                        <ul class="submenu">
                            <li><a href="#">DVR & Kits</a></li>
                            <li><a href="#">Seurity Cameras</a></li>
                            <li><a href="#">Spy Camreas</a></li>
                            <li><a href="#">Wireless & IP Cameras</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Mini Video</a></li>
                        </ul>
                    </li>

                    <li class="dropdown"><a href="#">Services</a>
                        <ul class="submenu">
                            <li><a href="#">Warranty Registration</a></li>
                            <li><a href="#">Professional Installation</a></li>
                        </ul>
                    </li>

                    <li class="dropdown"><a href="#">Support</a>
                        <ul class="submenu">
                            <li><a href="#">Support Home</a></li>
                            <li><a href="#">Support Center</a></li>
                            <li><a href="#">Customer Feedback</a></li>
                            <li><a href="#">Contact Tech Support</a></li>
                            <li><a href="#">DVR DDNS Portal</a></li>
                        </ul>
                    </li>

                    <li class="dropdown"><a href="#">Multimedia</a>
                        <ul class="submenu">
                            <li><a href="#">Cctvcart Videos</a></li>
                            <li><a href="#">Podcasts</a></li>
                            <li><a href="#">Video Instruction Guides</a></li>
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
        <!--end of bottom  wrap -->
    </div>
    <!--end of header wrap -->
    <div class="main_wrap">
        <div class="main">
        </div>
        <!--end of main  -->
    </div>
    <!--end of main wrap -->
    <div class="footer_wrap">
        <footer></footer>
    </div>
    <!--end of footer wrap -->
</body>
</html>

我的CSS文件：

* {
   margin: 0px;
   padding: 0px;
 }
 .header_wrap {
   width: 100%;
   height: 160px;
   background: red;
   position: relative;
 }
 .main_wrap {
   width: 100%;
   height: 1475px;
   background: green;
 }
 .footer_wrap {
   width: 100%;
   height: 325px;
   background: aqua;
 }
 .main {
   width: 1000px;
   height: 100%;
   background: blue;
   margin: auto;
 }
 footer {
   width: 1000px;
   height: 100%;
   background: aqua;
   margin: auto;
 }
 .header_top_wrap {
   width: 100%;
   height: 23px;
   background: #ccc;
 }
 .header_bottom_wrap {
   width: 100%;
   height: 40px;
   background: #06F;
   position: absolute;
   bottom: 0px;
   left: 0px;
 }
 .header_top {
   width: 1000px;
   height: 100%;
   background: purple;
   margin: auto;
 }
 .header_bottom {
   width: 1000px;
   height: 100%;
   background: black;
   margin: auto;
 }
 .bottom_menu > li {
   display: inline-block;
 }
 .bottom_menu a
 {
     font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
     color: #fff;

 }
 .bottom_menu > li >a {
   display: block;
   text-decoration: none;


   padding: 0px 30px;
   height: 40px;
   line-height: 35px;
   text-align: center;
 }
.bottom_menu > li:hover >a
{
    background:#fff;
    color:#151716;
}
.submenu  a:active, .submenu  a:visited{
  display: block;
  color: #fff;
  text-decoration: none;
  z-index: 21;
}
.submenu {
  position: absolute;
  display: none;
  width:200px;
  height:auto;
  background:white;
  list-style:none;
}
.dropdown:hover > .submenu{
  display: block;

}
.submenu>li>a
{
    display:block;
    width:100%;
    height:42px;
    background:black;
    text-decoration:none;
    line-height:58px;
    padding-left:20px;
    border:1px dashed white;
}

这里是JSFiddle：

Here is the JSFiddle :

https://jsfiddle.net/zwjpawug/embedded/result/ p>

http://jsfiddle.net/zwjpawug/

推荐答案

尝试此操作：

HTML CODE 

HTML CODE
< / div>
<！ - end of main - >
< / div>
<！ - end of main wrap - >
< div class =footer_wrap>
< footer>< / footer>
< / div>
<！ - footer wrap - >
< / body>
< / html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Welcome to Cctvcart store</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="header_wrap"> <div class="header_top_wrap"> <div class="header_top"> </div> </div> <!--end of header top wrap --> <div class="header_bottom_wrap"> </div> <!--end of bottom wrap --> </div> <!--end of header wrap --> <div class="main_wrap"> <div class="header_bottom"> <ul class="bottom_menu"> <li class="dropdown"><a href="#">Company</a> <ul class="submenu"> <li><a href="#">About Cctvcart</a> </li> <li><a href="#">New Releases</a> </li> <li><a href="#">Contact us</a> </li> </ul> </li> <li class="dropdown"><a href="#">Products</a> <ul class="submenu"> <li><a href="#">DVR & Kits</a> </li> <li><a href="#">Seurity Cameras</a> </li> <li><a href="#">Spy Camreas</a></li> <li><a href="#">Wireless & IP Cameras</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Mini Video</a></li> </ul> </li> <li class="dropdown"><a href="#">Services</a> <ul class="submenu"> <li><a href="#">Warranty Registration</a> </li> <li><a href="#">Professional Installation</a> </li> </ul> </li> <li class="dropdown"><a href="#">Support</a> <ul class="submenu"> <li><a href="#">Support Home</a> </li> <li><a href="#">Support Center</a> </li> <li><a href="#">Customer Feedback</a> </li> <li><a href="#">Contact Tech Support</a> </li> <li><a href="#">DVR DDNS Portal</a> </li> </ul> </li> <li class="dropdown"><a href="#">Multimedia</a> <ul class="submenu"> <li><a href="#">Cctvcart Videos</a> </li> <li><a href="#">Podcasts</a> </li> <li><a href="#">Video Instruction Guides</a> </li> </ul> </li> </ul> </div> <div class="main"> </div> <!--end of main --> </div> <!--end of main wrap --> <div class="footer_wrap"> <footer></footer> </div> <!--end of footer wrap --> </body> </html>

CSS CODE 

   * {
   margin: 0px;
   padding: 0px;
 }
 .header_wrap {
   width: 100%;
   height: 160px;
   background: red;
   position: relative;
 }
 .main_wrap {
   width: 100%;
   height: 1475px;
   background: green;
 }
 .footer_wrap {
   width: 100%;
   height: 325px;
   background: aqua;
 }
 .main {
   width: 1000px;
   height: 100%;
   background: blue;
   margin: auto;
   position:relative;
   top:-200px;
   z-index:10;
 }
 footer {
   width: 1000px;
   height: 100%;
   background: aqua;
   margin: auto;
 }
 .header_top_wrap {
   width: 100%;
   height: 23px;
   background: #ccc;
 }
 .header_bottom_wrap {
   width: 100%;
   height: 40px;
   background: #06F;
   position: absolute;
   bottom: 0px;
   left: 0px;
 }
 .header_top {
   width: 1000px;
   height: 100%;
   background: purple;
   margin: auto;
 }
 .header_bottom {
   width: 175px;
   /*height: 100%;
   margin: auto;*/
   background: black;
   z-index:1;
 }
 .bottom_menu {
     width:150px; 
 }
 .bottom_menu > li {
   /*display: inline-block;*/
 }
 .bottom_menu a
 {
     font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
     color: #fff;

 }
 .bottom_menu > li >a {
   display: block;
   text-decoration: none;
   padding: 0;
   height: 40px;
   line-height: 35px;
   text-align: center;
   width:150px;
 }
.bottom_menu > li:hover >a
{
    background:#fff;
    color:#151716;
    width:170px;
}
.submenu  a:active, .submenu  a:visited{
  display: block;
  color: #fff;
  text-decoration: none;
  z-index: 21;
}
.submenu {
  position: absolute;
  margin-left:160px;
  display: none;
  width:auto;
  height:auto;
  background:white;
  list-style:none;
  z-index:100;
  margin-top:-40px;
}
.dropdown:hover > .submenu{
  display: block;

}
.submenu>li>a
{
    display:block;
    width:100%;
    height:42px;
    background:black;
    text-decoration:none;
    line-height:58px;
    padding-left:20px;
    border:1px dashed white;
}

这可能会有帮助。

这篇关于我怎么能带底栏菜单在侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆