如何用CSS编写下拉菜单？

发布于 2024-10-15 09:24:35 字数 3505 浏览 2 评论 0原文

我编写了一个水平导航，如下所示。

在此处输入图像描述

但我很难尝试为其编写下拉菜单。

如果有人可以帮助我在租赁下方编写一个简单的下拉菜单（在导航栏中以海蓝色突出显示），我可以对此进行改进。

谢谢

这是我当前的 html 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"             
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="css/layout.css" rel="stylesheet" type="text/css" />
  <title>Untitled Document</title>
</head>

<body>
<ul class="glossymenu">
    <li class="separator"><a href="#"><b>Reservations</b></a></li>
                       /* Added for the drop down */
                   <ul class="child">
                           <li><a href="#"><b>New Reservation</b></a></li>
                           <li><a href="#"><b>Search Reservation</b></a></li>
                           <li><a href="#"><b>Search Customer</b></a></li>
                           <li><a href="#"><b>Search Vehicle</b></a></li>
                       </ul>
            <li class="separator"><a href="#"><b>Rentals</b></a></li>
    <li class="separator"><a href="#"><b>Tariffs</b></a></li>   

            <li class="separator"><a href="#"><b>Fleet</b></a></li> 
    <li class="separator"><a href="#"><b>Tools</b></a></li> 
    <li class="separator"><a href="#"><b>Reports</b></a></li>
            <li class="separator"><a href="#"><b>System Management</b></a></li>        
    </ul>

</body>

这是我的 CSS 代码：

.glossymenu{

    padding: 0 0 0 0px;
    margin: 0 auto 0 auto;
    background: url(../images/menur_bg.gif) repeat-x; 
    height: 36px;
    list-style: none;
    border:solid 1px #CCC;
}

.glossymenu li{

    float:left;
}

.glossymenu li a{

    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold; 
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 20px;

}

.glossymenu li a b{

    float: left;
    display:block;
    padding: 0 28px 0 8px; 
}

.glossymenu li a:hover{

    color: #fff;
    background: url(../images/menur_hover_left.gif) no-repeat; 
    background-position: left bottom;;
}

.glossymenu li a:hover b{

    color: #fff; 
    background-image: url(../images/menur_hover_right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.glossymenu li.separator {

    background:url(../images/separator.gif) no-repeat;
    background-position:right;
    padding: 0 5px 0 3.5px;
}

   /* Added for the drop down */  
.glossymenu .child {

    position:absolute;
    visibility:hidden;
    top:100px;
}

.glossymenu ul li:hover  {

    visibility:visible;
    z-index:9999; 
}

原文

I have coded a horizontal navigation as shown below.

enter image description here

But I am having a hard time trying to code a drop down menu for it.

If someone can help me with coding a plain simple drop down menu below Rentals (highlight in the navigation bar in sea blue), I can improve on that.

Thanks

Here is my current html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"             
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="css/layout.css" rel="stylesheet" type="text/css" />
  <title>Untitled Document</title>
</head>

<body>
<ul class="glossymenu">
    <li class="separator"><a href="#"><b>Reservations</b></a></li>
                       /* Added for the drop down */
                   <ul class="child">
                           <li><a href="#"><b>New Reservation</b></a></li>
                           <li><a href="#"><b>Search Reservation</b></a></li>
                           <li><a href="#"><b>Search Customer</b></a></li>
                           <li><a href="#"><b>Search Vehicle</b></a></li>
                       </ul>
            <li class="separator"><a href="#"><b>Rentals</b></a></li>
    <li class="separator"><a href="#"><b>Tariffs</b></a></li>   

            <li class="separator"><a href="#"><b>Fleet</b></a></li> 
    <li class="separator"><a href="#"><b>Tools</b></a></li> 
    <li class="separator"><a href="#"><b>Reports</b></a></li>
            <li class="separator"><a href="#"><b>System Management</b></a></li>        
    </ul>

</body>

Here is my css code:

.glossymenu{

    padding: 0 0 0 0px;
    margin: 0 auto 0 auto;
    background: url(../images/menur_bg.gif) repeat-x; 
    height: 36px;
    list-style: none;
    border:solid 1px #CCC;
}

.glossymenu li{

    float:left;
}

.glossymenu li a{

    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold; 
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 20px;

}

.glossymenu li a b{

    float: left;
    display:block;
    padding: 0 28px 0 8px; 
}

.glossymenu li a:hover{

    color: #fff;
    background: url(../images/menur_hover_left.gif) no-repeat; 
    background-position: left bottom;;
}

.glossymenu li a:hover b{

    color: #fff; 
    background-image: url(../images/menur_hover_right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.glossymenu li.separator {

    background:url(../images/separator.gif) no-repeat;
    background-position:right;
    padding: 0 5px 0 3.5px;
}

   /* Added for the drop down */  
.glossymenu .child {

    position:absolute;
    visibility:hidden;
    top:100px;
}

.glossymenu ul li:hover  {

    visibility:visible;
    z-index:9999; 
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江湖彼岸 2024-10-22 09:24:35

你想要类似的东西吗
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

添加：

一些基于CSS的菜单

http://purecssmenu.com/ - 我猜你可以生成 css

http://cssmenumaker.com/drop_down_css_menu.php

http://sperling.com/examples/menuh/

回复收藏 0 原文

北凤男飞 2024-10-22 09:24:35

在您的示例中，我看不到您将鼠标悬停在第二级上的位置设置为“显示：阻止”。
这是 CSS-Dropdown-Menu 的一个简单示例。

HTML：

 <ul class="topLevel">
    <li><a href="#">Car</a>
                <ul class="secondLevel">
                    <li><a href="#">Car1</a></li>
                    <li><a href="#">Car2</a></li>
                    <li><a href="#">Car3</a></li>
                </ul>
            </li>
        </ul>

CSS：

.secondLevel{display:none;}
.topLevel:hover ul{display:block;}

in your example i can not see where you set on hover the Second-Level to "display:block".
Here is a simple example for CSS-Dropdown-Menu.

HTML:

 <ul class="topLevel">
    <li><a href="#">Car</a>
                <ul class="secondLevel">
                    <li><a href="#">Car1</a></li>
                    <li><a href="#">Car2</a></li>
                    <li><a href="#">Car3</a></li>
                </ul>
            </li>
        </ul>

CSS:

.secondLevel{display:none;}
.topLevel:hover ul{display:block;}

回复收藏 0 原文

~没有更多了~

关于作者

浪漫人生路

暂无简介

0 文章

0 评论

24 人气

关注发私信

linfzu01

文章 0 评论 0

关注

§对你不离不弃

文章 0 评论 0

关注

可遇━不可求

文章 0 评论 0

关注

枕梦

文章 0 评论 0

关注

qq_3LFa8Q

文章 0 评论 0

关注

JP

文章 0 评论 0

友情链接

文江博客

如何用CSS编写下拉菜单？

谢谢

Thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如何用CSS编写下拉菜单？

谢谢

Thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。