Растущие вкладки и зависания с большей высотой

Question

Растущие вкладки и зависания с большей высотой

0

У меня проблема, пытаясь сделать наведение выше, чем стандартный темный фон в навигационных вкладках.

Это отлично работает с техникой "раздвижных дверей" + спрайтом. Но необходимо восстановить код с HTML 5 и CSS 3.

HTML:

<nav>
    <ul class="reset">
      <li class="current"><a href="index.html">home page</a></li>
      <li><a href="#">about us</a></li>
      <li><a href="#">technology</a></li>
      <li><a href="services.html">services</a></li>
      <li><a href="#">network</a></li>
      <li><a href="contacts.html">contacts</a></li>
    </ul>
  </nav>

CSS:

 nav {
  position: relative;
  top: 38px;
  right: 0px;
  height: 38px;
  padding-top: 10px;
  float: right;
}

nav li {
  height: 38px;
  float: left;
  list-style-type: none;
  margin-left: 1px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: bottom;
}

nav a {
  height: 22px;
  padding: 16px 16px 0px 16px;
  display: block;
  text-decoration: none;
  color: white;
  background: #16222f;
  border-radius: 4px 4px 0px 0px;
}

nav a:hover {
  background: #ff4e00;
  border-radius: 4px 4px 0px 0px;
}

Текущие результаты: http://jsfiddle.net/acy5p/

Я буду рад любому совету.

Alex 28 нояб. 2013, в 22:24

Источник

0

Я плохо понимаю, чего ты хочешь достичь
DaniP 28 нояб. 2013, в 21:29
0

Я не знаю, что вы хотите знать. Вы должны быть более конкретным, чем «У меня есть проблема».
Thijs Kramer 28 нояб. 2013, в 21:34
0

Спасибо за внимание. Возможно, мой вопрос был сформулирован не очень хорошо, но решение довольно простое (от Marinus). Это моя вина - я прочитал слишком много информации, и она запуталась в моей голове.
Alex 29 нояб. 2013, в 16:17

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

Я плохо понимаю, чего ты хочешь достичь
Я не знаю, что вы хотите знать. Вы должны быть более конкретным, чем «У меня есть проблема».
Спасибо за внимание. Возможно, мой вопрос был сформулирован не очень хорошо, но решение довольно простое (от Marinus). Это моя вина - я прочитал слишком много информации, и она запуталась в моей голове.

Marinus · Accepted Answer · 2013-11-28T20-50-00.000Z

Привет, я изменил ваш css, надеюсь, это то, что вы ищете.

  /*Menu*/
    nav {
      position: relative;
      top: 38px;
      right: 0px;
      height: 58px;
      padding-top: 10px;
      float: right;
        vertical-align:bottom;
    }
    nav li {
      height: 38px;
      float: left;
      list-style-type: none;
      margin-left: 1px;
      text-transform: uppercase;
      text-align: center;
      vertical-align: bottom;
    }
    nav a {
      height: 22px;
      padding: 16px 16px 0px 16px;
      display: block;
      text-decoration: none;
      color: white;
      background: #16222f;
      border-radius: 4px 4px 0px 0px;
    }
    li a:hover {
      background: #ff4e00;
      border-radius: 4px 4px 0px 0px;
        margin-top: -10px;
        padding-bottom:10px;
        top:-10px;
    }

jsfiddle.net/acy5p/1 посмотреть на эту скрипку...

Большое спасибо, Маринус! Это именно то, что мне нужно.
Удовольствие ... нам всем нужна помощь здесь и там ..