CODEWITHSUNDEEP
htmlcssdreamweaver
erp
erp

Reputation: 3014

making only outlying sections of a navigation bar rounded

this is my first day dealing with html / web coding in general. Currently creating a website using Dreamweaver to help. I have a question about rounded edges on the corners of nav bar sections. I know in the css you use border-radius: 5px 5px etc.

I am trying to make the left and right ends of the nav bar rounded on the far edges, and for the drop down menu of each section of the nav bar i want the bottom two corners of the bottom most section rounded, but no luck. I tried to make a class for example leftEdge, and apply it to the section of the left most piece of the nav bar, but it took no effect.

One last thing and i suppose i could figure it out (i think it would just be an effect of then one of them is hovered over) like the left most one. Originally when nothing is hovered over I want the left most section to be rounded on top left and bottom left, then when it is hovered over the drop down menu will appear and the bottom left and bottom right corners of the bottom most block will be rounded AND i want the bottom left corner of the parent block from the nav bar to go back to being un-rounded.

here is the 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;
}

and here is the code for the nav bar thus far:

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

Upvotes: 0

Views: 344

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

Here's how to have the bottom most section of the dropdown be rounded

#topMenu ul ul li:last-child {
       border-radius: 0 0 50px 50px;
}

Here's how to make the nav menu left and right sides rounded.

I added the following classes to make this work

<li class="topleftmenuitem"><a href="#">Home</a>
<li class="toprightmenuitem"><a href="#">Login</a> </li>

and the css

#topMenu .topleftmenuitem {
    border-radius: 50px 0 0 50px; 
}
#topMenu .toprightmenuitem {
    border-radius: 0 50px 50px 0;
}

fiddle http://jsfiddle.net/KwE4h/

Upvotes: 1

Related Questions