0
我一直在使用在线教程来创建一个只使用CSS和HTML的水平下拉菜单导航栏。教程已经很好，但是我想让我的导航栏变得流畅，以适应不同的浏览器大小，同时仍然保持水平导航栏。Liquid CSS only horizontal navigation bar
我听说这个流体CSS可以使用％和ems来代替像素的固定宽度，但是我的尝试已经失败了。请任何人提供一些帮助，以了解如何实现这种流体CSS。
这里是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Casa Magnolia Home Page</title>
<link rel="stylesheet" type="text/css" href="css/homePage.css"/>
</head>
<body>
<div id="wrapper" align="center">
<div id="header" align ="left">
<?php
include "ImageFunctions.php";//include the PHP class
//create an object of the class so that its methods can be accessed
$myImageFunction = new ImageFunctions();
$logo = $myImageFunction->logo();
//$data= $myImageFunction->getData();
?>
</div>
<div id ="menuWrapper" align="left">
<div id ="navMenu" align="center">
<ul>
<li><a href="#">Home</a></li><!-- end Home link -->
<li><a href="#">The House</a>
<ul>
<li><a href="#">Info</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Slide Show</a></li>
</ul>
</li><!-- ends the House info list -->
<li><a href="#">The Area</a>
<ul>
<li><a href="#">Map</a></li>
<li><a href="#">Info about the area</a></li>
<li><a href="#">Sites and Attractions</a></li>
<li><a href="#">Web Address</a></li>
</ul>
</li><!-- ends The Area info list -->
<li><a href ="#">Terms and Conditions</a>
<ul>
<li><a href="#">Payments</a></li>
<li><a href="#">Cancellation</a></li>
<li><a href="#">Security Deposits</a></li>
<li><a href="#">Smoking Policy</a></li>
<li><a href="#">Pets Policy</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Swimming Pool</a></li>
<li><a href="#">Pest Control</a></li>
<li><a href="#">Complaints</a></li>
<li><a href="#">Arrival/Departure</a></li>
<li><a href="#">Codes of Conduct</a></li>
<li><a href="#">Limits of Liability</a></li>
</ul>
</li><!-- end of Terms and Conditions list -->
<li><a href ="#">Book With Us</a></li><!-- end of Book with us Link -->
<li><a href ="#">Help</a>
<ul>
<li><a href="#">Contact Us</a></li>
</ul>
</li><!-- end of Help list -->
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div><!-- end navMenu div -->
</div> <!-- ends the menuWrapper div -->
</div>
</body>
这里是我的CSS代码：
/*
Document : homePage
Created on : 16-Feb-2012, 17:00:56
Author : gerrard
Description:
Purpose of the stylesheet follows.
*/
@charset "utf-8";
#header
{
width: 100%;
height: 50px;
float: top;
background-color: beige;
margin:20px;
}
#menuWrapper
{
width: 100%;
height: 100%;
background-color: yellow;
margin: 10px;
}
#navMenu
{
width:100%;
height:100%;
float: center;
margin: 0;
padding: 0;
}
#navMenu ul
{
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: orchid;
}
#navMenu ul li a
{
text-align: center;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 40%;
width: 230px;
display: block;
color: yellow;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul
{
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul
{
visibility: visible;
}
/********************************************************************************/
#navMenu li:hover
{
background: visible;
}
#navMenu ul li:hover ul li a:hover
{
background: violet;
color: silver;
}
#navMenu a:hover
{
color: peachpuff;
}
.clearFloat
{
clear: both;
margin: 0;
padding: 0;
}