CSS - Стиль меню кликабельных мест

Привет, ребята, я устраиваю свой первый сайт, и у меня проблема с моим дополнительным меню, atm просто текстовая работа как ссылка, и мне нужно изменить его на целую ли, будет работать как ссылка.CSS - Стиль меню кликабельных мест

Мне нужно сделать это в CSS, а не в JS.

Живая версия: http://funedit.com/andurit/try9/ (вы можете увидеть несколько submenues там, они все те же CSS/HTML

HTML:

<nav class="submenu"> 
     <ul> 
     <li><span class="text"><a href="#">HERNÍ SERVERY </a></span><span class="arrows"></span></li> 
     <li><span class="text"><a href="#">BAN LIST </a></span><span class="arrows"></span></li> 
     <li><span class="text"><a href="#">UNBAN ŽÁDOSTI </a></span><span class="arrows"></span></li> 
     <li><span class="text"><a href="#">ADMINI </a></span><span class="arrows"></span></li> 
     </ul> 
    </nav>

CSS:

.submenu{ 
    color: #1a6eb6; 
    display: inline-block; 
    height: 50px; 
    width:780px; 
} 

.submenu ul { 
    margin-left: 20px; 
    padding-left: 0px;   
} 

.submenu ul li{ 
    list-style-position: inside; /* Bodka v novom riadku vo vnutry */ 
    list-style-type: none;   /* bez bodky */ 
    background-image: url("images/shop_menu_bg.png"); 
    background-repeat: repeat-x; 
    height: 38px; 
    width: 187px; 
    display: inline-block; 
    color: #1a6eb6;   
} 

.submenu ul li:hover { 
    background-image: url("images/shop_menu_bg_hover.png"); 
    width: 187px; 
    height: 38px;    
} 

.submenu ul li .text{ 
    color: #1a6eb6; 
    display: inline-block; /* aby sa dala rovnomerne posunut sipka a nie podla dlzky textu*/ 
    height: 31px; 
    width:115px; 
    line-height: 28px; 
    margin-left: 5px;   
} 

.submenu ul li .arrows{ 
    background-image: url("images/arrows.png"); 
    background-repeat: repeat-x; 
    display: inline-block; 
    height: 17px; 
    width: 14px; 
    margin: 0px 0px 0px 45px; 
    vertical-align: middle;  
} 

.submenu ul li:hover .arrows{ 
    background-position: -3px -14px;   
}

Может кто-нибудь помочь мне с это?

ps Спасибо за чтение этого сообщения :)

источник

2014-04-24 user258459

Там есть нет подменю в вашем предоставленном HTML. Просто дать ему класс не делает его подменю. –

Я не хочу делать меню и подменю, это подменю jsut, я хочу стиль :) – user258459

Это не «подменю», если только его «ребенок из меню« ul ». Возможно, вы имеете в виду «вторичное» меню? –

Заменить некоторые CSS с помощью CSS У меня есть ниже, установка span.text ширина до 100%, то стрелки охватывают до position: absolute, а затем установить их родителя position: relative, который должен сделать трюк

.submenu ul li { 
background-image: url("images/shop_menu_bg.png"); 
background-repeat: repeat-x; 
color: #1A6EB6; 
display: inline-block; 
height: 38px; 
list-style-position: inside; 
list-style-type: none; 
position: relative; /* added this */ 
width: 187px; 
} 
.submenu ul li .text { 
color: #1A6EB6; 
display: inline-block; 
height: 31px; 
line-height: 28px; 
margin-left: 5px; 
position: relative; /* added this for correct z-index */ 
width: 100%; /* added this */ 
z-index: 3; /* added this */ 
} 
.submenu ul li .arrows { 
background-image: url("images/arrows.png"); 
background-repeat: repeat-x; 
display: block; 
height: 17px; 
margin: 0; 
position: absolute; /* added this */ 
right: 10px; /* added this to position it correctly */ 
top: 6px; /* added this to position it correctly */ 
vertical-align: middle; 
width: 17px; 
z-index: 2; /* added this for correct z-index */ 
} 
.submenu ul li .text a { 
color: #636363; 
display: block; /* added this */ 
width: 100%; /* added this */ 
}

источник

2014-04-24 16:14:10 Amir5000

Привет, человек, спасибо за ваш ответ, его фактический не помог :(i понять, что текстовый блок на полном размере, но href просто TEXT не полный элемент – user258459

Я отредактировал ответ, извините, что забыл добавить '.submenu ul li .text a' CSS к моему ответу, должно быть хорошо сейчас – Amir5000

Я просто добавил правильный z-индекс, поэтому ссылка также находится над стрелками. – Amir5000

немного изменить структуру так, чтобы текст и стрелка внутри вашей гиперссылке так:

<li><a href="#" style="display:block"><span class="text">DISKUSNÍ FÓRUM </span><span class="arrows"></span></a></li>

А потом укладывать «ли» Кому:

.submenu ul li a{display:block}

Это должно сделать трюк.

источник

2014-04-24 15:34:32 rodgersjono

Я добавил 'display: block' как встроенный стиль, но вы захотите сделать это через css – rodgersjono

CSS - Стиль меню кликабельных мест

ответ

Смежные вопросы