HTML5CSS3下拉菜单_Html_Css_Drop Down Menu_Menubar

HTML5CSS3下拉菜单

html css drop-down-menu

HTML5CSS3下拉菜单,html,css,drop-down-menu,menubar,Html,Css,Drop Down Menu,Menubar,我正在尝试创建一个css3和html5的简单下拉菜单。不管出于什么原因，尽管我遇到了障碍。基本功能是应该发生的，但我用它按下了整个菜单栏。我如何使它像一个正常的下拉菜单栏没有整个菜单栏移动 <html> <head> <meta charset="UTF-8"> <title></title> <link href="../CSS/Main.css" rel="stylesheet" type="text/css"> <

我正在尝试创建一个css3和html5的简单下拉菜单。不管出于什么原因，尽管我遇到了障碍。基本功能是应该发生的，但我用它按下了整个菜单栏。我如何使它像一个正常的下拉菜单栏没有整个菜单栏移动

<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../CSS/Main.css" rel="stylesheet" type="text/css">
</head>

<body background="../backgroundImage/UtahMoutains-copy7.png"style="background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size:cover; margin:0px;">

    <div style=" float:left; width:100%; background-color:#DDD margin:0; position:relative; margin:0px;">

        <img src="../backgroundImage/utahGovLogo.png" style=" float:left; padding:20px;">

        <img src="../Images/Search Button.png" style="float:right; padding:20px;">

    </div>
    <nav>
        <ul style="list-style:none; text-align:center; background-color:#DDD; font-family: Arial,Helvetica, Neue,sans-serif; font-size:120%; color:#666; margin:0px;">
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#" style=""> Government </a>
                <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">State Agencies</a></li>
                    <li><a href="#" style="">Governors Office</a></li>
                    <li><a href="#" style="">Executive Branch</a></li>
                    <li><a href="#" style="">Legislative Branch</a></li>
                    <li><a href="#" style="">Judicial Branch</a></li>
                    <li><a href="#" style="">City & County Government</a></li>
                    <li><a href="#" style="">Federal Government</a></li>
                    <li><a href="#" style="">Election & Voting</a></li>
                    <li><a href="#" style="">Utah Code & Constitution</a></li>
                    <li><a href="#" style="">State Telephone Directory</a></li>
                    <li><a href="#" style="">Utah Data</a></li>
                    <li><a href="#" style="">Open.Utah.gov</a></li>
                </ul><!-- end of  Government  drop down menu-->
            </li><!-- end of Government Button-->
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> Services </a>
              <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">Utah.gov Online Services</a></li>
                    <li><a href="#" style="">Citizen Services</a></li>
                    <li><a href="#" style="">Business Services</a></li>
                    <li><a href="#" style="">Gov to Gov Services</a></li>
                    <li><a href="#" style="">Financial</a></li>
                    <li><a href="#" style="">Legal</a></li>
                    <li><a href="#" style="">Utah.gov Registration</a></li>
                    <li><a href="#" style="">Citizen Alerts</a></li>
                    <li><a href="#" style="">Trending</a></li>
                </ul>

            </li>
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> Employment </a>
              <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">Find a Job</a></li>
                    <li><a href="#" style="">Education & Training</a></li>
                    <li><a href="#" style="">State Employment</a></li>
                    <li><a href="#" style="">Careers</a></li>
                </ul>
            </li>
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> Business </a>
              <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">Online Business Serices</a></li>
                    <li><a href="#" style="">Starting a Business</a></li>
                    <li><a href="#" style="">Running a Business</a></li>
                    <li><a href="#" style="">Relocating a Business</a></li>
                    <li><a href="#" style="">Dissolving a Business</a></li>
                    <li><a href="#" style="">Assess your Business Idea</a></li>
                    <li><a href="#" style="">Select your Business Structure</a></li>
                    <li><a href="#" style="">Prepare a Written Business Plan</a></li>
                    <li><a href="#" style="">Government Business Requirments</a></li>
                    <li><a href="#" style="">Financial Resources</a></li>
                </ul>
            </li>
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> Education </a>
              <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">K - 12 Education</a></li>
                    <li><a href="#" style="">Colleges & Universities</a></li>
                    <li><a href="#" style="">Educational Resources</a></li>
                    <li><a href="#" style="">STEM</a></li>
                    <li><a href="#" style="">Utah History for Kids</a></li>
                    <li><a href="#" style="">Homework Help</a></li>
                    <li><a href="#" style="">Libraries</a></li>
                    <li><a href="#" style="">Student Network</a></li>
                    <li><a href="#" style="">School Reports</a></li>
                </ul>
            </li>
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> Resident </a>
              <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">Citizens & Community</a></li>
                    <li><a href="#" style="">Health & Social Serives</a></li>
                    <li><a href="#" style="">Newcomers Guide</a></li>
                    <li><a href="#" style="">Moving to Utah</a></li>
                    <li><a href="#" style="">Cars & Transportation</a></li>
                    <li><a href="#" style="">Utah Laws</a></li>
                    <li><a href="#" style="">Tax Information</a></li>
                    <li><a href="#" style="">RSS ( Just for Youth)</a></li>
                    <li><a href="#" style="">Seniors.Utah.gov</a></li>
                    <li><a href="#" style="">Help your Neighbor</a></li>
                </ul>
            </li>
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> Visiting </a>
              <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">Travel & Tourism</a></li>
                    <li><a href="#" style="">State Parks</a></li>
                    <li><a href="#" style="">Arts & Culture</a></li>
                    <li><a href="#" style="">Highway Information</a></li>
                    <li><a href="#" style="">Sports & Recreation</a></li>
                    <li><a href="#" style="">Arts & Leisure</a></li>
                </ul>
            </li>
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> About </a>
            </li>
            <li style="display: inline-block; margin-top:20px; margin-left:2%; margin-right:2%; margin-bottom:10px;"><a href="#"> Connect </a>
              <ul style="text-decoration:none; list-style:none;">
                    <li><a href="#" style="">Facebook</a></li>
                    <li><a href="#" style="">Twitter</a></li>
                    <li><a href="#" style="">Google +</a></li>
                    <li><a href="#" style="">Photos</a></li>
                    <li><a href="#" style="">YouTube</a></li>
                    <li><a href="#" style="">Mobile</a></li>
                </ul>
            </li>
        </ul>
    </nav>

为了提前回答您的问题，以及为什么我会制作内联样式而不将其全部放在CSS文件中，这段代码是为一位在基本HTML类中工作的朋友编写的

感谢您在这件事上提供的任何帮助

我将您的代码放到编辑器中，让它试一试

我认为你正在寻求对你所需要的做一些细微的改变

   nav ul li ul {
     display: none;
   }

   nav ul li:hover > ul {
     display:block;
     position:absolute;
     top: 100%;
     left: 0;
   }

   nav ul li {
     position: relative;
   }

这将使下拉列表显示在正确的位置。它们仍然需要设计样式，但带有相对容器的

position:absolute

可以防止它们影响周围的布局，我相信这正是您所希望的

希望这能帮到你

注意：您可以通过下面的代码段看到更改是如何影响的

nav-ul-li-ul{
显示：无；}
导航ul li：悬停>ul{
显示：块；
位置：绝对位置；
最高：100%；
左：0；
}
李国荣{
位置：相对位置；
}

您将发现其他对齐问题，但要解决手头的问题，请添加：

li
{
    vertical-align:top;
}

li
{
垂直对齐：顶部；
}
nav ul li ul{
显示：无；}
导航>ul>li：悬停>ul{
显示：块；
位置：相对；}






li
{
    vertical-align:top;
}