Question

这是我处理html / web编码的第一天。目前正在使用Dreamweaver创建一个网站来提供帮助。我有一个关于导航栏部分角落圆角的问题。我知道你在css中使用border-radius：5px 5px等。

我试图让导航栏的左右两端在远端边缘上圆滑，对于导航栏的每个部分的下拉菜单，我希望最底部的底部两个角落圆润，但是没运气。我尝试创建一个类例如leftEdge，并将其应用到导航栏左侧部分的部分，但它没有效果。

最后一件事，我想我可以弄清楚（我认为这只会是其中一个人的影响徘徊），就像最左边的一个。最初当没有任何东西悬停在上面时，我希望最左边的部分在左上角和左下角是圆形的，然后当它悬停在下拉菜单上时，最底部块的左下角和右下角将被舍入并且我希望导航栏中父块的左下角返回到非舍入。

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

Answer 1

以下是如何将下拉列表的最底部分舍入为

#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;
}

小提琴http://jsfiddle.net/KwE4h/

使导航栏的外围部分四舍五入

1 个答案: