使用纯CSS制作下拉列表

Question

Above is a picture of what I'm trying to accomplish. I want to stay away from bootstrap and just use pure css to accomplish this.

If you expand my jsfiddle preview, it'll look better as, because of my defined css, the "navbar" gets moved into another line, but essentially shows the same thing which is:

The menu dropdown is showing on the side and not on the bottom. What can I do to accomplish this?

https://jsfiddle.net/r1nLp33c/

 @font-face{ font-family: Bebas; src:url(BEBAS.TTF); } body{ margin:0 auto; height:500px; font-family: Bebas; } .header{ top:0; position:absolute; left:0; right:0; background:#ff6200; height:50px; width:100%; color:white; font-family: Bebas; } .header .call{ line-height:50px; } .call{ width:60%; margin:0 auto; } .login{ float:right; } .callme, .loginme{ color:#AF2626; } .signup{ margin-left:10px; } .number{ margin-left:10px; } .navbar{ margin-top:50px; right:0; left:0; position:relative; height:130px; width:100%; background:#F7F7F7; border-radius:0px; padding:0px; } .inside-navbar{ line-height:130px; width:60%; margin:0 auto; font-size:40px; } .logo{ color:#FF6200; } #navsman{ font-size:16px; float:right; } #navsman > span{ margin-left:30px; } #navsman > span:hover{ border-bottom:4px solid #FF6200; } #navsman > span a{ color:black; text-decoration:none; } #navsman ul{ list-style: none; line-height: 1; /* position: relative; */ position: relative; display: inline-table; } #navsman ul:after { content: ""; clear: both; display: block; } #navsman ul li{ } .hideme:hover ul{ background:red; display:block; } .breadcrumb{ height:30px; color:#CCCCCC; position:relative; background-color:white; padding:0px; } .bodywrapper{ background-color:none; padding-top:70px; width:60%; margin:0 auto; position:relative; font-family: 'Ubuntu', sans-serif; } .contact{ font-family: 'Open Sans', sans-serif; margin-top:80px; font-weight:800; } .contact h2{ color:#FF6200; font-weight:800; font-size:31px; } .contactus h2, .reachus h2{ color:#FF6200; font-size:28px; } .contact h3{ font-size:15px; padding-right:110px; } .contactus{ display:inline-block; float:left; width:50%; padding-right:100px; } .contactus hr, .reachus hr{ border:none; height:7px; color:black; background:black; } .reachus{ width:50%; display:inline-block; float:left; padding-right:100px; } .contactswrapper{ margin-top:70px; } #name{ width:100%; background:#ECECEC; } #phone, #email{ width: 49.5%; display: inline-block; box-sizing: border-box; background:#ECECEC; } #message{ width:100%; height:150px; padding-bottom: 120px; background:#ECECEC; } .submit{ border-radius:0px; color:white; background:#FF6200; width:100px; } .social{ margin-top:85px; } i{ border-radius:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="headwrapper"> <div class="header"> <div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span> <span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span> </div> </div> <div class="navbar"> <div class="inside-navbar"> <span>YOUR<span class="logo">LOGO</span></span> <span id="navsman"> <span><a href="">Title1</a></span> <span class="hideme"><a href="">Title2</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Inspiration</a></li> </ul> </span> <span><a href="">Title3</a></span> <span><a href="">Title4</a></span> <span><a href="">Title5</a></span> <span><a href="">Title6</a></span> <span><a href="">Title7</a></span> </div> </span> </div> </div><!--Navbar end--> 

Answer 1

To display it bottom. apply following css.

.hideme {
    position: relative;
}

Change #navsman ul from position:relative; to position: absolute;

#navsman ul{
    position: absolute;
    left:0;
    padding-left: 0;
   }

And change line-height: 130px; to line-height: 30px; for .inside-navbar

Working Fiddle

Answer 2

You should simplify your HTML and CSS to begin with. The best way to nest submenus is to use <ul> tags inside a <li> tag. You can do something similar using tables, or using divs and spans, but really it gets far too complicate too fast. The easiest way, and still the best, is to use nested <li><ul></ul></li> combinations.

Eg:

<ul id="navigation">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a>
    <ul>
        <li><a href="#">Sub link 1</a></li>
        <li><a href="#">Sub link 1</a>
        <ul>
            <li><a href="#">3rd level link 1</a></li>
            <li><a href="#">3rd level link 1</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

Then using CSS selectors, such as #menu > li > ul , you can target specific levels of nested elements

There's a lot of websites out there with creating sub-level navigations, both vertical and horizontal. The way that the menus are positioned outside, or below other menus is using either absolute positioning (horizontal; out of flow), or using static positioning (vertical; in flow).