这是我第一天处理一般的 html/web 编码。目前正在使用Dreamweaver 帮助创建网站。我对导航栏部分 Angular 落的圆边有疑问。我知道在 css 中你使用 border-radius: 5px 5px 等等。
我试图使导航栏的左右两端在最远的边缘变圆，对于导航栏每个部分的下拉菜单，我希望最底部部分的底部两个 Angular 变圆，但是没有运气。我尝试制作一个类，例如 leftEdge，并将其应用于导航栏最左侧的部分，但没有任何效果。
最后一件事，我想我可以像最左边的那样弄清楚(我认为这只是其中一个悬停的结果)。最初当什么都没有悬停时我希望最左边的部分在左上角和左下角是圆形的，然后当它悬停在下拉菜单上时会出现并且最底部 block 的左下角和右下角将被舍入并且我希望导航栏中父 block 的左下角恢复为非圆形。
这是CSS:
@charset "utf-8";
#topMenu {
padding: 0px;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
top: 80px;
}
#topMenu ul {
margin: 0px;
padding: 0px;
}
#topMenu ul li {
background-color: #666;
float: left;
border: 1px solid #999999;
position: relative;
list-style-type: none;
}
#topMenu ul li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
#topMenu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#topMenu ul li ul li a:hover {
background-color: #39F;
}
#topMenu ul li:hover ul {
visibility: visible;
}
#topMenu ul li:hover {
background-color: #919191;
}
这是到目前为止导航栏的代码:
</head>
<body bgcolor="#999999">
<div id="topMenu">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">link1</a>
<li><a href="#">link2</a>
<li><a href="#">link3</a>
<li><a href="#">link4</a>
</ul>
<!--Closure of Home ul tag-->
</li>
<!--Closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li><a href="#">Broswe Jobs</a>
<ul>
<li><a href="#">link1</a>
<li><a href="#">link2</a>
<li><a href="#">link3</a>
<li><a href="#">link4</a>
</ul>
<!--Closure of Home ul tag-->
</li>
<!--Closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li><a href="#">Post Job</a>
<ul>
<li><a href="#">link1</a>
<li><a href="#">link2</a>
<li><a href="#">link3</a>
<li><a href="#">link4</a>
</ul>
<!--Closure of Home ul tag-->
</li>
<!--Closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">link1</a>
<li><a href="#">link2</a>
<li><a href="#">link3</a>
<li><a href="#">link4</a>
</ul>
<!--Closure of Home ul tag-->
</li>
<!--Closing the main li tag-->
</ul>
<!--end of main ul tag-->
<ul>
<li><a href="#">Login</a> </li>
<!--Closing the main li tag-->
</ul>
<!--end of main ul tag-->
</div>
</body>
</html>
最佳答案
这是使下拉列表最底部的部分四舍五入的方法
#topMenu ul ul li:last-child {
border-radius: 0 0 50px 50px;
}
下面是如何使导航菜单左右两边变圆。
我添加了以下类来完成这项工作
<li class="topleftmenuitem"><a href="#">Home</a>
<li class="toprightmenuitem"><a href="#">Login</a> </li>
和CSS
#topMenu .topleftmenuitem {
border-radius: 50px 0 0 50px;
}
#topMenu .toprightmenuitem {
border-radius: 0 50px 50px 0;
}
fiddle http://jsfiddle.net/KwE4h/
关于html - 仅使导航栏的外围部分变圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21224435/