CSS/HTML Как добавить заголовок в строку меню?

Question

Я использую строку меню, которую я свяжу с кодом ниже. Мне было интересно, есть ли способ, которым я мог бы добавить название моего веб-сайта в самое левое из меню, например, название, спасибо.

меню штрих-код:

<nav role='navigation'> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Undefined</a></li> 
    <li><a href="#">Undefined</a></li> 
    <li><a href="#">Undefined</a></li> 
    <li><a href="#">Undefined</a> 
     <ul> 
     <li><a href="">Undefined</a></li> 
     <li><a href="">Undefined</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Undefined</a></li> 
    <li><a href="#">Undefined</a></li> 
    </ul> 
</nav> 
<style type="text/css" > 

@import url(http://fonts.googleapis.com/css?family=Lato); 

*, *:before, *:after{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
    font-family: 'Lato', sans-serif; 
} 

/*| Navigation |*/ 

nav{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: #fff; 
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.1); 
    border: 1px solid rgba(0,0,0,.1); 
    z-index: 111 
} 
    nav ul{ 
    list-style: none; 
    position: relative; 
    float: right; 
    margin-right: 100px; 
    display: inline-table; 
    } 
    nav ul li{ 
     float: left; 
     -webkit-transition: all .2s ease-in-out; 
     -moz-transition: all .2s ease-in-out; 
     transition: all .2s ease-in-out; 
    } 

    nav ul li:hover{background: rgba(0,0,0,.15);} 
    nav ul li:hover > ul{display: block;} 
    nav ul li{ 
     float: left; 
     -webkit-transition: all .2s ease-in-out; 
     -moz-transition: all .2s ease-in-out; 
     transition: all .2s ease-in-out; 
    } 
     nav ul li a{ 
     display: block; 
     padding: 30px 20px; 
     color: #222; 
     font-size: .9em; 
     letter-spacing: 1px; 
     text-decoration: none; 
     text-transform: uppercase; 
     } 
     nav ul ul{ 
     display: none; 
     background: #fff; 
     position: absolute; 
     top: 100%; 
     box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1); 
     border: 1px solid rgba(0,0,0,.1); 
     } 
     nav ul ul li{float: none; position: relative;} 
      nav ul ul li a { 
      padding: 15px 30px; 
      border-bottom: 1px solid rgba(0,0,0,.05); 
      } 
      nav ul ul ul { 
      position: absolute; 
      left: 100%; 
      top:0; 
      } 
</style> 

Answer 1

Как о чем-то вроде добавления названия в качестве нового элемента списка?

<li class="title">Title</li> 

.title { 
    display: block; 
    padding: 30px 20px; 
    color: #222; 
    font-size: .9em; 
    letter-spacing: 1px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

.title:hover { 
    background: rgba(0, 0, 0, 0); 
} 

парение здесь используются, чтобы просто отменить существующее парение, в результате чего заголовка не изменить его цвет фона.

Я создал скрипку этого here.

Update

Для получения титула придерживаться слева, просто переместить его на один уровень вверх в DOM, так что за пределами <ul>, но внутри <nav>. Затем добавьте float: left; к вашему title класс:

.title { 
    float: left; 
} 

Перемещая титул за пределами вашего <ul>, вы на самом деле не нужны какие-либо из парения, перекрывали все больше, так что вы можете избавиться от:

.title:hover { 
    background: rgba(0, 0, 0, 0); 
} 

Я создал новую скрипку, демонстрирующую это here (обратите внимание, что я удалил некоторые из неопределенных ссылок, чтобы продемонстрировать поведение с небольшим окном).

Надеюсь, это поможет!