сделать округлыми только отдельные участки навигационной панели

Question

сделать округлыми только отдельные участки навигационной панели

0

это мой первый день, посвященный кодированию 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>

erp 20 янв. 2014, в 01:39

Источник

Теги:

html

css

dreamweaver

1 ответ

Ещё вопросы

CRABOLO · Accepted Answer · 2014-01-19T21-38-00.000Z

Здесь, как иметь нижний самый раздел выпадающего списка

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

о, классный человек, я просто поставил класс в неправильное положение /. но последний вопрос, который я вроде как упомянул выше, когда я наведу курсор мыши на одного из родителей, и если это самый левый родитель (с закругленными краями) или самый правый родитель (с закругленными краями), есть ли способ, которым я могу получить нижнее закругление уйти?
jsfiddle.net/KwE4h/1 Да, есть. Просто добавьте это #topMenu .topleftmenuitem:hover { border-radius: 50px 0 0 0; } и #topMenu .toprightmenuitem:hover { border-radius: 0 50px 0 0; }
спасибо за помощь мужик. я ценю последний вопрос. когда я прокручиваю до последнего ребенка, он всегда теряет закругленные нижние углы, когда завис над ним. это как бы ты это исправил? #topMenu ul ul li: last-child: hover {border-radius: 0 0 8px 8px; }
@erp #topMenu ul ul li:last-child:hover a { border-radius: 0 0 50px 50px; }