Suckerfish下拉菜单

最新推荐文章于 2024-09-14 17:04:32 发布

肖小芳

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量356

点赞数

分类专栏：前端学习小总结（1）文章标签：导航 css 下拉菜单

本文链接：https://blog.csdn.net/xiaoranmengyang/article/details/51910560

版权

前端学习小总结（1）专栏收录该内容

5 篇文章 0 订阅

订阅专栏

以前从未做过下拉菜单式的导航栏，就试着做了个下拉菜单。期间发现将li元素元素转换为行内块时发现：行内块之间默认有距离的（即使设置了margin为0）。于是就采用了浮动的办法，发现这类问题就解决了。同时也发现将li转为行内块时，会形成如图的效果

而采用浮动的办法后，效果图为：

在浮动后，就会带来一定影响：父元素ul导航栏就会收缩。《精通css》这本书6.7节是将父元素也左浮动了。然而一般页面要求导航栏水平居中的，故而，我未采用这种方法，而采用的是将父元素overflow：hidden技术.

为了在激活之前隐藏实际的下拉菜单，需要将ul的position设置为absolute，然后把它隐藏在屏幕左边之外。

整个效果图为：

程序如下;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="ex1.css"/>
</head>
<body>
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li id="mm"><a href="#">Services</a>
        <ul id="nav1">
            <li><a href="#">Design</a></li>
            <li><a href="#">Developement</a></li>
            <li><a href="#">Consultancy</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

</body>
</html>

@charset"utf-8";
body{
    margin:0;
}
#nav,#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
#nav{
    width:960px;
    margin:0 auto;
}
#nav li{
    background-color: #eeeeee;
    border:1px solid  #cccccc;
    width:238px;
    text-align: center;
}
#nav>li{
    float:left;
}
#nav a{
    color:black;
    text-decoration: none;
    display: block;
}
#nav1{
    position:absolute;
    left:-9999px;
}
#mm:hover  #nav1{
    left:auto;
}
#nav a:hover,#na a:focus{
    color:white;
    background-color: #666666;
}