Question

我正在用subnav做导航栏，我从下面的代码得到的结果是当我悬停主链接时，子菜单不在主链接下面。如果您点击产品链接，您可以看到它位于主页链接下，我希望产品子菜单显示在产品链接下，并在产品开始处的p下方对齐。 2.也可以有人告诉我为什么有子菜单的链接会在下一个链接之间创建空格。在这个例子中，家庭和产品之间有一个空间，但在联系我们和付款之间没有空间。如何忽略链接之间的空格而不管主菜单是否保存子菜单？

<!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" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<link rel="stylesheet" href="navigation.css" type="text/css">
<!-- <link rel="stylesheet" href="navi.css" type="text/css"> -->
</head>
<body>
    <div class="navigation">
        <ul>
            <li>
                <a href="#">Home</a>
                <ul>
                    <li><a href="#">Hello</a></li>
                    <li><a href="#">Hi</a></li>
                    <li><a href="#">About us</a></li>
                </ul>
            </li>
            <li><a href="new  2.html">Products</a>
                <ul>
                    <li><a href="#">Printing</a></li>
                    <li><a href="#">Scanning</a></li>
                </ul>
            </li>
            <li><a href="sidebarright.html">Contact</a></li>
            <li><a href="sidebarright.html">Payment</a></li>
        </ul>
    </div>
</body>
</html>

的CSS：

.navigation{ width:400px;margin:0; padding:0;}
.navigation li{
    display:inline; 
}

.navigation li a{
    color:white;
    padding:.2em 1em;
    background-color:black;
    text-decoration:none;
    font-size:20px;
    background-color:black; 
    border-right:1px white solid;
}

.navigation li a:hover{background-color:#eee;border-top:2px solid #ddd;color:#333;}
.navigation li ul {
    position: absolute; 
    display: none;
    width: inherit;

 }
.navigation li:hover ul {
    display:block; 
    width:100px;
    margin: 4px 0 0 -20px;  
}
.navigation li:hover ul li{
    position: relative;       
    list-style-type:none;
    float:left;
}  
.navigation li:hover ul li a{
    display:block;
    width:100px;
    float:left;
    color:red; 
    padding:.2em 1em;
    background-color:#eee; 
    border-bottom:thin black solid;
}

Answer 1

Add position:relative to your li, then give left value for the submenu, so that the submenu comes under the correct parent menu.

Also if you don't want spaces between the menu items, use float:left on li instead of display:inline. You can still see a small white space, that is the border-right you've added on .navigation li a

https://jsfiddle.net/hd23dhab/2/

Answer 2

Add these changes to your css:

-(void)locationManager:(CLLocationManager *)manager didVisit:(CLVisit*)visit
{

}

fiddle

subnavigation css-显示在悬停位置

2 个答案: