The following code is a conditional comment that runs in non-IE browsers
<!--[if! ie]><!-->
<!--<! [endif]-->
Ultimately works in non IE and special IE browsers
(or use the LTE LT or GT GTE to determine, such as:
<!--[If LTE IE 6]>
Information displayed under IE 6
<! [endif]-->
).
<!--[if IE 6]><!-->
or a non IE browser <!--<! [endif]-->
The above mentioned conditional annotation, which is to judge the browser type, and then to define what browser to display what content.
The Dropmenu (Pull-down menu) model is derived from Cssplay, which is made by the author's numerous studies and repeated tests. I think that this model to practice the principle of conditional annotation.
Let's look at one of the simplest models.
Here's xhtm.
<div class= "Menu" >
<ul>
<li><a class= "Drop" href= ". /menu/index.html ">demos
<!--[if IE 7]><!-->
</a>
<!--<! [endif]-->
< display </a> Label--> when!--IE7
<table><tr><td>
<ul>
<li><a href= ". /menu/zero_dollars.html "Title=" "The Zero Dollar ads page" >zero dollars advertising page</a></li>
<li><a href= ". /menu/embed.html "title=" wrapping text around images ">wrapping text around images</a></li>
<li><a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li>
<li><a href= ". /menu/nodots.html "title=" removing Active/focus borders ">active focus</a></li>
<li><a class= "Drop" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click with no borders</li>
<li class= "Upone" ><a href= ". /menu/shadow_boxing.html "title=" Multi-position drop Shadow ">shadow boxing</a></li>
<li><a href= ". /menu/old_master.html "title=" Image map for detailed information ">image map for detailed information</a></ Li>
<li><a href= ". /menu/bodies.html "title=" fun with background images ">fun with background images</a></li>
<li><a href= ". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li>
<li><a href= ". /menu/em_images.html "title=" em size images compared ">em image sizes Compared</a></li>
</ul>
</td></tr></table>
Adopt double style, give IE and non ie respectively define style, if IE time, add a final_drop_ie.css on FINAL_DROP.CSS Foundation
First look at the non-ie CSS is how to define
. menu UL Li ul
Display:none;
}
/* Specific to non IE browsers * *
. Menu ul Li:hover a {
Color: #fff;
Background: #bd8d5e;
}
/* Define mouse over style * *
. Menu UL Li:hover ul {
Display:block;
Position:absolute;
Top:3em;
margin-top:1px;
left:0;
width:150px;
}
In non ie, see the mouse when the slide over Li contains the UL display, because these browsers support li:hover usage
The CSS under IE
. menu ul li a:hover {
Color: #fff;
Background: #bd8d5e;
}
* * When the mouse is sliding outdated Li contains the UL show * *
. menu ul Li A:hover ul
Display:block;
Position:absolute;
Top:3em;
left:0;
Background: #fff;
margin-top:0;
marg\in-top:1px;
}
Inheritance above the final_drop.css style, no mouse time when Li contains UL does not show
Because
<!--[If LTE IE 6]>
</a>
<! [endif]-->
So in the IE6 under the mouse over the time in the a:hover to show that the UL content
And IE7 under the Li:hover show the same effect
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.