Home > Developer > CSS

Using a pure CSS to teach you to achieve the Drop-down navigation menu and drop down containers and other tutorials

Source: Internet
Author: User
Tags visibility
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First we take the list of UL Li to start our menu can also say the production of navigation bar:

In the page we first build the following XHTML architecture:

The code is as follows Copy Code
<body>
<ul id= "Navwrapper" >
<li>
<a href= "#" >menu a</a>
<ul>
<li><a href= "#" >menu A, Item 1</a></li>
<li><a href= "#" >menu A, Item 2</a></li>
<li><a href= "#" >menu A, Item 3</a></li>
<li><a href= "#" >menu A, Item 4</a></li>
<li><a href= "#" >menu A, Item 5</a></li>
<li><a href= "#" >menu A, Item 6</a></li>
</ul>
</li>
<li>
<a href= "#" >menu b</a>
<div id= "test" ><a href= "#" >menu B, Item 1</a></div>
</li>
</ul>
<div id= "banner" ></div>
<div id= "Content" >
<p>page content here.</p>
</div>
</body>

Effect:

Next, we're going to design the styles and functions one step at a a (first to add a border around each element for subsequent styling differences):

Style code:

The code is as follows Copy Code
<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
BORDER:1PX solid black;
}
</style>

Effect:

So we can distinguish well, good design ~ ~

Below remove the link down line and list of ".". , and the parent list is arranged horizontally, and the child list is arranged vertically so that it looks like a drop-down menu ~ ~ (This is a level two list nesting, one parent, one child)

Style code:

The code is as follows Copy Code

<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
BORDER:1PX solid black;
}

a{
Text-decoration:none;
}
Ul#navwrapper li{
Float:left;
List-style:none;
}
Ul#navwrapper Li ul li{
Float:none;
}
div#banner{
Clear:both;
}
</style>

Effect:

Below to hide the child list and child containers (where the child container is the DIV container with the ID test), when the mouse moves to the parent list, the corresponding child list appears, through the ": hover" Implementation, the hidden display through the display of "none" and "block" to achieve, Note that there is no visibility "hidden" and "visible" to achieve, as for the difference between the corresponding attributes can be replaced by visibility to see the effect, here is not achieved

Style code:

The code is as follows Copy Code

<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
BORDER:1PX solid black;
}

    a{
        text-decoration:none
    }
    ul#navwrapper li{
        float:left
        List-style:none;
   }
    Ul#navwrapper li ul li{
        float:none
 & nbsp; }
    div#banner{
        clear:both;
   }
   

Ul#navwrapper Ul,ul#navwrapper div#test{
Display:none;
Position:absolute;
}
Ul#navwrapper li:hover ul,ul#navwrapper li:hover div#test{
Display:block;
}
</style>

Effect:

One thing to note here is that when the position of the child is not set to "absolute", the mouse is moved to the parent, and the children appearing in the page occupy a certain position, then "page content here" will produce a move, which is very bad. So we set the child "Position:absolute"; , so that they can get out of the normal process without affecting the content position behind it!

The parent position is slightly offset and the list of the first parent is left offset to the parent border, and a certain "volume" is given to the DIV container under the second parent

Style code:

The code is as follows Copy Code
<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
BORDER:1PX solid black;
}

a{
Text-decoration:none;
}
Ul#navwrapper li{
Float:left;
List-style:none;
}
Ul#navwrapper Li ul li{
Float:none;

margin-left:-41px;
}
div#banner{
Clear:both;

height:50px;
margin-top:30px;
}

Ul#navwrapper Ul,ul#navwrapper div#test{
Display:none;
Position:absolute;
}
Ul#navwrapper li:hover ul,ul#navwrapper li:hover div#test{
Display:block;
}

ul#navwrapper{
margin-left:-41px;
}
Ul#navwrapper div#test{
height:200px;
width:600px;
Background:lightgray;
}
</style>

Effect:

After all the borders are removed, the most basic structure is designed, and other styles can be adjusted freely ~ ~

Like what:

After all the borders are removed, and the whole is designed

Style code:

The code is as follows Copy Code
<style>
body,div,ul,li{
padding:0;
margin:0;
}
a{
Text-decoration:none;
}
Ul#navwrapper li{
Float:left;
List-style:none;

height:45px;
line-height:45px;
}
Ul#navwrapper Li ul li{
Float:none;
}
div#banner{
Clear:both;

height:50px;
margin-top:50px;
margin-left:50px;
}
div#content{
margin-left:50px;
}
Ul#navwrapper ul{
Display:none;
Position:absolute;
Background: #CCC;
}
Ul#navwrapper div#test{
Display:none;
Position:absolute;
height:200px;
width:600px;
Background: #cde6c7;
}
Ul#navwrapper li:hover ul,ul#navwrapper li:hover div#test{
Display:block;
}

ul#navwrapper{
Background: #CCC;
height:45px;
width:960px;
margin:0 Auto;
margin-top:30px;
}

Li a{
font-size:24px;
Color: #333;
Display:block;
height:45px;
padding:0 20px;
}
Li a:hover{
Color: #fff;
Background: #000;
}
</style>

Effect:

Figure I:

Figure II:

Ok! This is an example of a design above the basic structure. If you still need to design, only in the above basic structure design on the line ~ ~

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
dreamweaver drop down menu scrollable drop down menu how to make drop down menu in dreamweaver css drop down menus drop down menu swift 3 axure drop down menu tutorial drop down menu in html example
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More