HTML 5 CSS3 下拉菜单

Question

我正在尝试创建一个 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>

nav ul li ul {
display: none;}

nav ul li:hover > ul {
display:block;
position:relative;  }

提前回答你为什么我会制作内联样式而不把它全部放在我的 CSS 文件中这个代码是给一个在基本 HTML 中工作的朋友的=26=].

感谢您对此事的任何帮助

Answer 1

我将你的代码弹出到编辑器中试一试。

我认为您希望根据需要稍作更改。

   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 {
display: none;}

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

nav ul li {
  position: relative;
}

<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>

Answer 2

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

li
{
    vertical-align:top;
}

li
{
    vertical-align:top;
}

nav ul li ul {
display: none;}

nav>ul>li:hover > ul {
display:block;
position:relative;  }

 <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>

有关内联块的一些陷阱，请参阅这篇文章：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

HTML 5 CSS3 下拉菜单

HTML 5 CSS3 Dropdown menu

html

css

menubar

drop-down-menu