如何在Topbar中进行下拉菜单？ [英] How Do I Make A Dropdown Meny In A Topbar?

问题描述

我有一个HTML代码，其中有一个div有4个选项：Frontppage，achive，photo和about us。在归档选项下，我想要一个有多个选择的下拉菜单。我希望那些选择与存档看起来相同（相同的背景和悬停效果）



请帮助我。如果你完全不理解我的问题，那就问问我可以解释一下。



现在这是我的HTML代码：

I have a html code where i have a div with 4 options: Frontppage, achive, photo and about us. Under the archive option i would like a dropdown meny with multiple choises. I would like those choises to look the same as the archive (the same background and hover effect)

Help me please. And if you don't understand my question fully just ask and i can explain more.

THIS IS MY HTML CODE RIGHT NOW:

<div id="header">
    <ul class="top">
	<li class="top"><a class="top" href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\hemsida1.html">Startsida</a>
	<li class="top"><a class="top" href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\arkivsida.html">Arkiv</a>
	<li class="top"><a class="top" href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\fotosida.html">Foto</a>
	<li class="top"><a class="top" href="#">Om oss</a>
    </ul>
</div>

这是我现在的CSS代码：

THIS IS MY CSS CODE RIGHT NOW:

ul.top{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

a:link.top, a:visited.top{
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background: url(http://www.iiti.ac.in/Public_Relations/images/greySemiTransparentBox.png);
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

li.top{
float: left;
margin-left: 85px;
}

a:hover.top, a:active.top{
background: url(http://nffp.com.sa/Style%20Library/AdventureWorks/background.png?Mobile=1&Source=%2F_layouts%2Fmobile%2Fview.aspx%3FList%3D93b404c4-87bd-4842-a167-abe138472ec5%26View%3D904edebc-4d5e-4078-8748-85c57486acab%26RootFolder%3D%252FStyle%2520Library%252FAdventureWorks%26CurrentPage%3D1);
}`

推荐答案

您可以查看此网站。 下拉菜单 [ ^ ]

特别是这个看起来像你想要的样子：响应式平面菜单 [ ^ ]



您还应该考虑查看 Bootstrap [ ^ ]

You can have a look at this web site. Drop Down Menus[^]
Especially this one looks like what you want it to look like: Responsive Flat Menu[^]

You should also consider to look into Bootstrap[^]

引用：

Bootstrap是最流行的HTML，CSS和JavaScript框架，用于开发响应式移动优先网站。



Bootstrap完全免费下载和使用！

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

Bootstrap is completely free to download and use!

在Bootstrap中，你已经有这种菜单了ilt in。



Lycka till。

In Bootstrap, you have this kind of menus already built in.

Lycka till.

我的HTML代码：SRY！

MY HTML CODE: SRY!

<div id="header">

<ul class = "top">
    <li class= "top"><a class= "top"href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\hemsida1.html">Startsida</a>
    <li class= "top"><a class= "top"href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\arkivsida.html">Arkiv</a>
    <li class= "top"><a class= "top"href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\fotosida.html">Foto</a>
    <li class= "top"><a class= "top"href="#">Om oss</a>
</ul>

</div>

这篇关于如何在Topbar中进行下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！